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;
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.