Although the children property can be accessed, TypeScript displays an error

When fetching the single post using POST_QUERY from the SANITY package, I encountered an error in TypeScript indicating that the children property does not exist. Although the TypeScript types show that the children property exists and is accessible, an error is still thrown.

Here is 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: In the full types of my POST_QUERYResult, you can see that the body contains a children property.

export type POST_QUERYResult = {
  _id: string;
  _type: "post";
  _createdAt: string;
  _updatedAt: string;
  // Remaining properties omitted for brevity
} | null;

https://i.sstatic.net/rEdXdD5k.png

Answer №1

After some troubleshooting, I have discovered the correct solution. It turns out that I was approaching it incorrectly, which led to the error.

The key is to incorporate the

<PortableText value={result.body} />
component from the next-sanity package in order to display the block content effectively.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

A guide to mocking Prisma using Jest mock functionality

Utilizing prisma for database interactions and eager to implement jest-mock to simulate the findMany call. https://jestjs.io/docs/jest-object#jestmockedtitem-t-deep--false brands.test.ts import { PrismaService } from "@services/mysql.service"; i ...

Can the type definition be shared between React and AWS CDK when using Node.js?

I am currently building an application with React frontend and AWS CDK backend, using TypeScript. Due to the usage of GraphQL in certain parts of the application, I am finding myself duplicating type definitions extensively. For instance, when creating a ...

What is the best way to retrieve the value of an object based on its key?

I'm working on a function that returns another function, and I need some guidance: fn: <T extends Object>(key: keyof T) => (value: ???) => void I want the type of ??? to be determined by the type of instanceOfT[key]. For instance, in the ...

What are the steps involved in setting up a typescript project?

I have taken on the challenge of learning typescript with Node.js and the TypEcs Eclipse plugin. After successfully installing Node.js and running npm install -g typescript, I proceeded to follow the installation guidelines provided on the TypEcs homepage ...

TypeScript introduces a flexible generic type, Optional<T, Props>, allowing customized props for a specific

In my attempt to develop a type called Optional<T, TProps>, where T represents the initial type and TProps is a union type of properties that need to be optional. As an illustration: type A = Optional<{a: string, b: string}, 'a'&g ...

Having trouble updating an array of objects using setState in Typescript

As a TypeScript novice, I am currently learning how to update the state of an array containing objects. The array in question is as follows: const [quantity, setQuantity] = React.useState<any[]>([ { id: '1', q: 100, }, ...

What is the best way to prevent jest.mock from being hoisted and only use it in a single jest unit test?

My goal is to create a mock import that will be used only in one specific jest unit test, but I am encountering some challenges. Below is the mock that I want to be restricted to just one test: jest.mock("@components/components-chat-dialog", () ...

What is the best way to ensure the height and width of a Next.js image matches the dimensions of the original image?

Currently, I am working on setting up an image gallery with a layout similar to Masonry. This layout involves multiple columns, all with the same width, adjusting based on the viewport width. The height of each item in the gallery is flexible, depending on ...

Angular: Connecting template data to different visual presentations

Looking for a solution to display data and map values to another presentation without needing complex ngIf statements or creating multiple components. Check out this sample: https://stackblitz.com/edit/angular-9l1vff The 'vals' variable contain ...

What is the proper way to include redirect_uri in next-auth?

I utilize next-auth for authorization import NextAuth from 'next-auth'; export default NextAuth({ providers: [ { id: 'reddit', name: 'Reddit', clientId: process.env.CLIENT_ID, ...

Retrieving multiple connections using Prisma's findMany method

I am currently working on implementing next.js crud prisma with a many-to-many relation. I have successfully created all the endpoints for my crud operations. Now, my focus is on connecting it to the client side to display students along with the classes t ...

TypeScript interface designed to capture objects containing a flexible number of values

In my possession is an object that looks like the following: { "0001": "a", "0002": "b", "0003": "c", ... } Is it possible for me to create a TypeScript interface that accurately represents this type? ...

Top method for declaring and setting up variables in Angular 2

I've been diving into the Angular Style Guide, but a question has come up: what is the most effective method for initializing a variable in a component? For instance, should I declare a variable like so: export class MyComponent implements OnInit { ...

Ionic 2 [InAppBrowser] disallowed due to user agent error

Encountering an issue when trying to load a webpage using the InAppBrowser cordova plugin. The error message "disallowed user agent" is being displayed. See below : Error disallowed user agent Here is the code snippet for opening the page : let browserR ...

Tips on creating a hierarchical ul list from a one-dimensional array of objects

I have an array filled with various objects: const data = [ {id: "0"},{id: "1"},{id: "2"},{id: "00"},{id: "01"},{id: "02"},{id: "11"},{id: "20"},{id: "23"},{id: & ...

Unleash the power of a module by exposing it to the global Window object using the dynamic

In my development process, I am utilizing webpack to bundle and manage my TypeScript modules. However, I am facing a challenge where I need certain modules or chunks to be accessible externally. Can anyone guide me on how to achieve this? Additional conte ...

The requested resource could not be located at @angular/platform-browser.js

I am attempting to set up ASP.NET MVC 5 (not Core) + Angular 2.0.0 + JSPM + SystemJS + TS Loader. Upon running the application, I encounter the following error: Failed to load resource: the server responded with a status of 404 (Not Found) http://localho ...

Having trouble with the image compressor not being imported correctly in Next.js?

I've been attempting to compress an image, but when I try to import the ImageCompressor normally like this: import ImageCompressor from "image-compressor.js"; It throws an error: Uncaught ReferenceError: window is not defined This is the s ...

Access the value of an object field from an observable by utilizing the async pipe

I am interested in delving deeper into the use cases for the async pipe in Angular. The concept of having data asynchronously appear in the view simply by adding a pipe that subscribes to the data is quite appealing to me. However, I have primarily encou ...

How to dynamically bind the attribute name of an object in an ngFor loop

One scenario I am working on involves assigning an Array of Objects to a select dropdown's options using ngFor like this: <select> <option *ngFor="let item of data" [value]="item.key">{{item.value}}</option> <select> Here is ...