tip

useSuspenseQuery & useSuspenseInfiniteQuery both return a [data, query]-tuple, to make it easy to directly use your data and renaming the variable to something descriptive

tsx

// @filename: pages/index.tsx

import React from 'react';

import { trpc } from '../utils/trpc';

function PostView() {

const [post, postQuery] = trpc.post.byId.useSuspenseQuery({ id: '1' });

      `const post: {     id: string;     title: string; }`

return <>{/* ... */}</>;

}

tsx

// @filename: pages/index.tsx

import React from 'react';

import { trpc } from '../utils/trpc';

function PostView() {

const [pages, allPostsQuery] = trpc.post.all.useSuspenseInfiniteQuery(

`{},`

`{`

  `getNextPageParam(lastPage) {`

    `return lastPage.nextCursor;`

  `},`

`},`

);

const { isFetching, isFetchingNextPage, fetchNextPage, hasNextPage } =

`allPostsQuery;`

return <>{/* ... */}</>;

}