typescriptnext.jssanity

Children property is accessible however typescript shows the error


I am fetching the single post with POST_QUERY from SANITY package. However typescript shows error which said that children property doesn't exist. In typescript types its shows that children property exist and accessible but typescript throw an error.

My query:

export const POST_QUERY = defineQuery(`*[_type == "post" && slug.current == $slug][0]`);
const result = await client.fetch(POST_QUERY, { slug: "how-i-became-a-blogger" }) as POST_QUERYResult;

Types: these are the whole types of my POST_QUERYResult and as you see that body contains children property

export type POST_QUERYResult = {
  _id: string;
  _type: "post";
  _createdAt: string;
  _updatedAt: string;
  _rev: string;
  title?: string;
  slug?: Slug;
  author?: {
    _ref: string;
    _type: "reference";
    _weak?: boolean;
    [internalGroqTypeReferenceTo]?: "author";
  };
  mainImage?: {
    asset?: {
      _ref: string;
      _type: "reference";
      _weak?: boolean;
      [internalGroqTypeReferenceTo]?: "sanity.imageAsset";
    };
    hotspot?: SanityImageHotspot;
    crop?: SanityImageCrop;
    alt?: string;
    _type: "image";
  };
  categories?: Array<{
    _ref: string;
    _type: "reference";
    _weak?: boolean;
    _key: string;
    [internalGroqTypeReferenceTo]?: "category";
  }>;
  publishedAt?: string;
  body?: Array<{
    children?: Array<{
      marks?: Array<string>;
      text?: string;
      _type: "span";
      _key: string;
    }>;
    style?: "blockquote" | "h1" | "h2" | "h3" | "h4" | "normal";
    listItem?: "bullet";
    markDefs?: Array<{
      href?: string;
      _type: "link";
      _key: string;
    }>;
    level?: number;
    _type: "block";
    _key: string;
  } | {
    asset?: {
      _ref: string;
      _type: "reference";
      _weak?: boolean;
      [internalGroqTypeReferenceTo]?: "sanity.imageAsset";
    };
    hotspot?: SanityImageHotspot;
    crop?: SanityImageCrop;
    alt?: string;
    _type: "image";
    _key: string;
  }>;
} | null;

enter image description here


Solution

  • I found the solution. I am doing it wrong way that's why i had encounted the error.

    I need to use <PortableText value={result.body} /> import from next-sanity package which is used to show the block content.