Sanity Library Reference Docs
    Preparing search index...

    Type Alias InferValue<T>

    InferValue: PortableTextInferValue<StegaAware<T>>

    Infer the Portable Text array value type from Sanity TypeGen generated types.

    Stega-aware version of InferValue from @portabletext/react: the inferred value type accepts both clean query results (sanityFetch with stega: false) and stega-branded results (sanityFetch when stega may be enabled). Don't clean the value with stegaClean() before rendering it, that strips the hidden characters @sanity/visual-editing uses to make each paragraph clickable. Instead, use stegaClean on individual strings at the point where they're compared against literals.

    Useful when building a re-usable wrapper component that only takes value as an input prop and sets up components internally. Pass a TypeGen- generated query result type that contains Portable Text fields - such as an individual query result like PostQueryResult, or the SanityQueries interface from @sanity/client - and InferValue<T> returns an array type containing every Portable Text item shape it can find.

    Always feed InferValue<T> query result types, not Sanity schema types. Schema types describe how content is stored, which can differ from how it is queried (e.g. references resolved with ->).

    Type Parameters

    • T
    // Re-usable component typed against every registered query. Relies on
    // `overloadClientMethods` being enabled in `sanity.cli.ts#typegen` (the default).
    import {
      PortableText,
      type InferStrictComponents,
      type InferValue,
      type SanityQueries,
    } from 'next-sanity'

    type PortableTextValue = InferValue<SanityQueries[keyof SanityQueries]>

    export function CustomPortableText(props: {value: PortableTextValue}) {
      const components = {
        types: {
          // custom types are autocompleted and fully typed
        },
      } satisfies InferStrictComponents<PortableTextValue>

      return <PortableText components={components} value={props.value} />
    }

    // Rendering `sanityFetch` results, with or without stega, type-checks:
    const {data} = await sanityFetch({query: postQuery, params})
    return Array.isArray(data?.content) && <CustomPortableText value={data.content} />

    Settings

    Member Visibility