Skip to content
tRPC

Partners

Static Site Generation

Prefetch tRPC queries in getStaticProps with createTRPCOptionsProxy and dehydrate, and stop the client from refetching them

On this page

To build a page's data into static HTML, prefetch its queries in getStaticProps. It works like prefetching in getServerSideProps, except that it runs at build time, or when Next.js revalidates the page, so there's no request.

This page builds on the Pages Router setup.

Fetch data in getStaticProps

Make a query client and a tRPC proxy that calls your router directly, prefetch the queries, and return the cache as trpcState. There's no request to build the context from, so pass one that doesn't need it.

This example uses superjson, so the post's createdAt reaches the page as a Date. It needs the matching _app from Using a data transformer.

pages/posts/[id].tsx
import { function dehydrate(client: QueryClient, options?: DehydrateOptions): DehydratedStatedehydrate, function useQuery<TQueryFnData = unknown, TError = Error, TData = TQueryFnData, TQueryKey extends QueryKey = readonly unknown[]>(options: DefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey>, queryClient?: QueryClient): DefinedUseQueryResult<TData, TError> (+2 overloads)useQuery } from '@tanstack/react-query';
import { 
function createTRPCOptionsProxy<TRouter extends AnyRouter, TFeatureFlags extends FeatureFlags = {
    keyPrefix: false;
}>(opts: TRPCOptionsProxyOptions<TRouter, TFeatureFlags>): TRPCOptionsProxy<TRouter, TFeatureFlags>
createTRPCOptionsProxy } from '@trpc/tanstack-react-query';
import type {
  type GetStaticPaths<Params extends ParsedUrlQuery = ParsedUrlQuery> = (context: GetStaticPathsContext) => Promise<GetStaticPathsResult<Params>> | GetStaticPathsResult<Params>GetStaticPaths,
  
type GetStaticPropsContext<Params extends ParsedUrlQuery = ParsedUrlQuery, Preview extends PreviewData = PreviewData> = {
    params?: Params;
    preview?: boolean;
    previewData?: Preview;
    draftMode?: boolean;
    locale?: string;
    locales?: string[];
    defaultLocale?: string;
    revalidateReason?: "on-demand" | "build" | "stale";
}
GetStaticPropsContext,
  
type InferGetStaticPropsType<T extends (args: any) => any> = Extract<Awaited<ReturnType<T>>, {
    props: any;
}>["props"]
InferGetStaticPropsType,
} from 'next';
import { 
const prisma: {
    post: {
        findMany: (opts: {
            select: {
                id: true;
            };
        }) => Promise<{
            id: string;
        }[]>;
    };
}
prisma } from '../../server/context';
import class superjsonsuperjson from 'superjson';
import { 
const appRouter: BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: true;
}, DecorateCreateRouterOptions<{
    post: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: true;
    }, DecorateCreateRouterOptions<{
        byId: QueryProcedure<{
            input: {
                id: string;
            };
            output: {
                id: string;
                title: string;
                text: string;
                createdAt: Date;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}>>
appRouter } from '../../server/routers/_app';
import { function makeQueryClient(): QueryClientmakeQueryClient } from '../../utils/query-client';
import { 
const useTRPC: () => TRPCOptionsProxy<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: true;
}, DecorateCreateRouterOptions<{
    post: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: true;
    }, DecorateCreateRouterOptions<{
        byId: QueryProcedure<{
            input: {
                id: string;
            };
            output: {
                id: string;
                title: string;
                text: string;
                createdAt: Date;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}>>, {
    ...;
}>
useTRPC } from '../../utils/trpc';

export async function 
function getStaticProps(context: GetStaticPropsContext<{
    id: string;
}>): Promise<{
    props: {
        trpcState: SuperJSONResult;
        id: string;
    };
    revalidate: number;
}>
getStaticProps(
  
context: GetStaticPropsContext<{
    id: string;
}>
context: 
type GetStaticPropsContext<Params extends ParsedUrlQuery = ParsedUrlQuery, Preview extends PreviewData = PreviewData> = {
    params?: Params;
    preview?: boolean;
    previewData?: Preview;
    draftMode?: boolean;
    locale?: string;
    locales?: string[];
    defaultLocale?: string;
    revalidateReason?: "on-demand" | "build" | "stale";
}
GetStaticPropsContext<{ id: stringid: string }>,
) {
  const const id: stringid = 
context: GetStaticPropsContext<{
    id: string;
}>
context.
params?: {
    id: string;
} | undefined
params?.id: string | undefinedid as string;
  const const queryClient: QueryClientqueryClient = function makeQueryClient(): QueryClientmakeQueryClient();
  const 
const trpc: TRPCOptionsProxy<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: true;
}, DecorateCreateRouterOptions<{
    post: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: true;
    }, DecorateCreateRouterOptions<{
        byId: QueryProcedure<{
            input: {
                id: string;
            };
            output: {
                id: string;
                title: string;
                text: string;
                createdAt: Date;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}>>, {
    ...;
}>
trpc = 
createTRPCOptionsProxy<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: true;
}, DecorateCreateRouterOptions<{
    post: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: true;
    }, DecorateCreateRouterOptions<{
        byId: QueryProcedure<{
            input: {
                id: string;
            };
            output: {
                id: string;
                title: string;
                text: string;
                createdAt: Date;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}>>, {
    ...;
}>(opts: TRPCOptionsProxyOptions<...>): TRPCOptionsProxy<...>
createTRPCOptionsProxy({
    
TRPCOptionsProxyOptionsInternal<BuiltRouter<{ ctx: object; meta: object; errorShape: DefaultErrorShape; transformer: true; }, DecorateCreateRouterOptions<{ post: BuiltRouter<{ ctx: object; meta: object; errorShape: DefaultErrorShape; transformer: true; }, DecorateCreateRouterOptions<...>>; }>>>.router: BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: true;
}, DecorateCreateRouterOptions<{
    post: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: true;
    }, DecorateCreateRouterOptions<{
        byId: QueryProcedure<{
            input: {
                id: string;
            };
            output: {
                id: string;
                title: string;
                text: string;
                createdAt: Date;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}>>
router: 
const appRouter: BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: true;
}, DecorateCreateRouterOptions<{
    post: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: true;
    }, DecorateCreateRouterOptions<{
        byId: QueryProcedure<{
            input: {
                id: string;
            };
            output: {
                id: string;
                title: string;
                text: string;
                createdAt: Date;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}>>
appRouter,
    TRPCOptionsProxyOptionsInternal<BuiltRouter<{ ctx: object; meta: object; errorShape: DefaultErrorShape; transformer: true; }, DecorateCreateRouterOptions<{ post: BuiltRouter<{ ctx: object; meta: object; errorShape: DefaultErrorShape; transformer: true; }, DecorateCreateRouterOptions<...>>; }>>>.ctx: object | (() => MaybePromise<object>)ctx: {},
    queryClient: QueryClient | (() => QueryClient)queryClient,
  });

  await const queryClient: QueryClientqueryClient.
QueryClient.prefetchQuery<{
    id: string;
    title: string;
    text: string;
    createdAt: Date;
}, TRPCClientErrorLike<{
    transformer: true;
    errorShape: DefaultErrorShape;
}>, {
    id: string;
    title: string;
    text: string;
    createdAt: Date;
}, TRPCQueryKeyWithoutPrefix>(options: FetchQueryOptions<{
    id: string;
    title: string;
    text: string;
    createdAt: Date;
}, TRPCClientErrorLike<{
    transformer: true;
    errorShape: DefaultErrorShape;
}>, {
    id: string;
    title: string;
    text: string;
    createdAt: Date;
}, TRPCQueryKeyWithoutPrefix, never>): Promise<void>
prefetchQuery(
const trpc: TRPCOptionsProxy<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: true;
}, DecorateCreateRouterOptions<{
    post: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: true;
    }, DecorateCreateRouterOptions<{
        byId: QueryProcedure<{
            input: {
                id: string;
            };
            output: {
                id: string;
                title: string;
                text: string;
                createdAt: Date;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}>>, {
    ...;
}>
trpc.
post: DecoratedRouterRecord<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: true;
}, DecorateCreateRouterOptions<{
    byId: QueryProcedure<{
        input: {
            id: string;
        };
        output: {
            id: string;
            title: string;
            text: string;
            createdAt: Date;
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>, {
    ...;
}> & DecorateRouterKeyable<...> & DecorateHandleReaders<...>
post.
byId: DecorateQueryProcedure<{
    input: {
        id: string;
    };
    output: {
        id: string;
        title: string;
        text: string;
        createdAt: Date;
    };
    transformer: true;
    errorShape: DefaultErrorShape;
    featureFlags: {
        keyPrefix: false;
    };
}> & Record<string, never>
byId.
DecorateQueryProcedure<{ input: { id: string; }; output: { id: string; title: string; text: string; createdAt: Date; }; transformer: true; errorShape: DefaultErrorShape; featureFlags: { ...; }; }>.queryOptions: TRPCQueryOptions
<{
    id: string;
    title: string;
    text: string;
    createdAt: Date;
}, {
    id: string;
    title: string;
    text: string;
    createdAt: Date;
}>(input: {
    id: string;
}, opts?: UnusedSkipTokenTRPCQueryOptionsIn<{
    id: string;
    title: string;
    text: string;
    createdAt: Date;
}, {
    id: string;
    title: string;
    text: string;
    createdAt: Date;
}, TRPCClientErrorLike<{
    transformer: true;
    errorShape: DefaultErrorShape;
}>, {
    keyPrefix: false;
}> | undefined) => UnusedSkipTokenTRPCQueryOptionsOut<{
    id: string;
    title: string;
    text: string;
    createdAt: Date;
}, {
    id: string;
    title: string;
    text: string;
    createdAt: Date;
}, TRPCClientErrorLike<...>, {
    keyPrefix: false;
}> (+2 overloads)
queryOptions({ id: stringid }));

  return {
    
props: {
    trpcState: SuperJSONResult;
    id: string;
}
props: {
      trpcState: SuperJSONResulttrpcState: class superjsonsuperjson.SuperJSON.serialize: (object: SuperJSONValue) => SuperJSONResultserialize(function dehydrate(client: QueryClient, options?: DehydrateOptions): DehydratedStatedehydrate(const queryClient: QueryClientqueryClient)),
      id: stringid,
    },
    revalidate: numberrevalidate: 1,
  };
}

export const const getStaticPaths: GetStaticPathsgetStaticPaths: type GetStaticPaths<Params extends ParsedUrlQuery = ParsedUrlQuery> = (context: GetStaticPathsContext) => Promise<GetStaticPathsResult<Params>> | GetStaticPathsResult<Params>GetStaticPaths = async () => {
  const 
const posts: {
    id: string;
}[]
posts = await 
const prisma: {
    post: {
        findMany: (opts: {
            select: {
                id: true;
            };
        }) => Promise<{
            id: string;
        }[]>;
    };
}
prisma.
post: {
    findMany: (opts: {
        select: {
            id: true;
        };
    }) => Promise<{
        id: string;
    }[]>;
}
post.
findMany: (opts: {
    select: {
        id: true;
    };
}) => Promise<{
    id: string;
}[]>
findMany({
    
select: {
    id: true;
}
select: {
      id: trueid: true,
    },
  });

  return {
    
paths: (string | {
    params: ParsedUrlQuery;
    locale?: string;
})[]
paths: 
const posts: {
    id: string;
}[]
posts.
Array<{ id: string; }>.map<{
    params: {
        id: string;
    };
}>(callbackfn: (value: {
    id: string;
}, index: number, array: {
    id: string;
}[]) => {
    params: {
        id: string;
    };
}, thisArg?: any): {
    params: {
        id: string;
    };
}[]
map((
post: {
    id: string;
}
post) => ({
      
params: {
    id: string;
}
params: {
        id: stringid: 
post: {
    id: string;
}
post.id: stringid,
      },
    })),
    // https://nextjs.org/docs/pages/api-reference/functions/get-static-paths#fallback-blocking
    fallback: GetStaticPathsFallbackfallback: 'blocking',
  };
};

export default function function PostViewPage(props: InferGetStaticPropsType<typeof getStaticProps>): JSX.ElementPostViewPage(
  
props: {
    trpcState: SuperJSONResult;
    id: string;
}
props: 
type InferGetStaticPropsType<T extends (args: any) => any> = Extract<Awaited<ReturnType<T>>, {
    props: any;
}>["props"]
InferGetStaticPropsType<typeof 
function getStaticProps(context: GetStaticPropsContext<{
    id: string;
}>): Promise<{
    props: {
        trpcState: SuperJSONResult;
        id: string;
    };
    revalidate: number;
}>
getStaticProps>,
) {
  const 
const trpc: TRPCOptionsProxy<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: true;
}, DecorateCreateRouterOptions<{
    post: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: true;
    }, DecorateCreateRouterOptions<{
        byId: QueryProcedure<{
            input: {
                id: string;
            };
            output: {
                id: string;
                title: string;
                text: string;
                createdAt: Date;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}>>, {
    ...;
}>
trpc = 
function useTRPC(): TRPCOptionsProxy<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: true;
}, DecorateCreateRouterOptions<{
    post: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: true;
    }, DecorateCreateRouterOptions<{
        byId: QueryProcedure<{
            input: {
                id: string;
            };
            output: {
                id: string;
                title: string;
                text: string;
                createdAt: Date;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}>>, {
    ...;
}>
useTRPC();
  const 
const postQuery: UseQueryResult<{
    id: string;
    title: string;
    text: string;
    createdAt: Date;
}, TRPCClientErrorLike<{
    transformer: true;
    errorShape: DefaultErrorShape;
}>>
postQuery = 
useQuery<{
    id: string;
    title: string;
    text: string;
    createdAt: Date;
}, TRPCClientErrorLike<{
    transformer: true;
    errorShape: DefaultErrorShape;
}>, {
    id: string;
    title: string;
    text: string;
    createdAt: Date;
}, TRPCQueryKeyWithoutPrefix>(options: UndefinedInitialDataOptions<{
    id: string;
    title: string;
    text: string;
    createdAt: Date;
}, TRPCClientErrorLike<{
    transformer: true;
    errorShape: DefaultErrorShape;
}>, {
    id: string;
    title: string;
    text: string;
    createdAt: Date;
}, TRPCQueryKeyWithoutPrefix>, queryClient?: QueryClient): UseQueryResult<...> (+2 overloads)
useQuery(
const trpc: TRPCOptionsProxy<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: true;
}, DecorateCreateRouterOptions<{
    post: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: true;
    }, DecorateCreateRouterOptions<{
        byId: QueryProcedure<{
            input: {
                id: string;
            };
            output: {
                id: string;
                title: string;
                text: string;
                createdAt: Date;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}>>, {
    ...;
}>
trpc.
post: DecoratedRouterRecord<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: true;
}, DecorateCreateRouterOptions<{
    byId: QueryProcedure<{
        input: {
            id: string;
        };
        output: {
            id: string;
            title: string;
            text: string;
            createdAt: Date;
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>, {
    ...;
}> & DecorateRouterKeyable<...> & DecorateHandleReaders<...>
post.
byId: DecorateQueryProcedure<{
    input: {
        id: string;
    };
    output: {
        id: string;
        title: string;
        text: string;
        createdAt: Date;
    };
    transformer: true;
    errorShape: DefaultErrorShape;
    featureFlags: {
        keyPrefix: false;
    };
}> & Record<string, never>
byId.
DecorateQueryProcedure<{ input: { id: string; }; output: { id: string; title: string; text: string; createdAt: Date; }; transformer: true; errorShape: DefaultErrorShape; featureFlags: { ...; }; }>.queryOptions: TRPCQueryOptions
<{
    id: string;
    title: string;
    text: string;
    createdAt: Date;
}, {
    id: string;
    title: string;
    text: string;
    createdAt: Date;
}>(input: {
    id: string;
}, opts?: UnusedSkipTokenTRPCQueryOptionsIn<{
    id: string;
    title: string;
    text: string;
    createdAt: Date;
}, {
    id: string;
    title: string;
    text: string;
    createdAt: Date;
}, TRPCClientErrorLike<{
    transformer: true;
    errorShape: DefaultErrorShape;
}>, {
    keyPrefix: false;
}> | undefined) => UnusedSkipTokenTRPCQueryOptionsOut<{
    id: string;
    title: string;
    text: string;
    createdAt: Date;
}, {
    id: string;
    title: string;
    text: string;
    createdAt: Date;
}, TRPCClientErrorLike<...>, {
    keyPrefix: false;
}> (+2 overloads)
queryOptions({ id: stringid: 
props: {
    trpcState: SuperJSONResult;
    id: string;
}
props.id: stringid }));

  switch (
const postQuery: UseQueryResult<{
    id: string;
    title: string;
    text: string;
    createdAt: Date;
}, TRPCClientErrorLike<{
    transformer: true;
    errorShape: DefaultErrorShape;
}>>
postQuery.status: "pending" | "error" | "success"status) {
    case 'pending':
      return <JSX.IntrinsicElements.p: DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>p>Loading...</JSX.IntrinsicElements.p: DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>p>;
    case 'error':
      return <JSX.IntrinsicElements.p: DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>p>Error: {
const postQuery: QueryObserverRefetchErrorResult<{
    id: string;
    title: string;
    text: string;
    createdAt: Date;
}, TRPCClientErrorLike<{
    transformer: true;
    errorShape: DefaultErrorShape;
}>> | QueryObserverLoadingErrorResult<{
    id: string;
    title: string;
    text: string;
    createdAt: Date;
}, TRPCClientErrorLike<{
    transformer: true;
    errorShape: DefaultErrorShape;
}>>
postQuery.
error: TRPCClientErrorLike<{
    transformer: true;
    errorShape: DefaultErrorShape;
}>
error.TRPCClientErrorBase<DefaultErrorShape>.message: stringmessage}</JSX.IntrinsicElements.p: DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>p>;
    case 'success': {
      const 
const post: {
    id: string;
    title: string;
    text: string;
    createdAt: Date;
}
post = 
const postQuery: QueryObserverSuccessResult<{
    id: string;
    title: string;
    text: string;
    createdAt: Date;
}, TRPCClientErrorLike<{
    transformer: true;
    errorShape: DefaultErrorShape;
}>> | QueryObserverPlaceholderResult<{
    id: string;
    title: string;
    text: string;
    createdAt: Date;
}, TRPCClientErrorLike<{
    transformer: true;
    errorShape: DefaultErrorShape;
}>>
postQuery.
data: {
    id: string;
    title: string;
    text: string;
    createdAt: Date;
}
data;
      return (
        <JSX.IntrinsicElements.article: DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>article>
          <JSX.IntrinsicElements.h1: DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>h1>{
const post: {
    id: string;
    title: string;
    text: string;
    createdAt: Date;
}
post.title: stringtitle}</JSX.IntrinsicElements.h1: DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>h1>
          <JSX.IntrinsicElements.em: DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>em>Created {
const post: {
    id: string;
    title: string;
    text: string;
    createdAt: Date;
}
post.createdAt: DatecreatedAt.Date.toLocaleDateString(locales?: Intl.LocalesArgument, options?: Intl.DateTimeFormatOptions): string (+2 overloads)toLocaleDateString('en-us')}</JSX.IntrinsicElements.em: DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>em>
          <JSX.IntrinsicElements.p: DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>p>{
const post: {
    id: string;
    title: string;
    text: string;
    createdAt: Date;
}
post.text: stringtext}</JSX.IntrinsicElements.p: DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>p>
        </JSX.IntrinsicElements.article: DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>article>
      );
    }
  }
}

Stop the client from refetching

TanStack React Query refetches stale data on the client when a component mounts, when the window regains focus, and when the network reconnects. If you only want the data from getStaticProps, for instance because your API is rate-limited, turn that off.

Per query:

import { function useQuery<TQueryFnData = unknown, TError = Error, TData = TQueryFnData, TQueryKey extends QueryKey = readonly unknown[]>(options: DefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey>, queryClient?: QueryClient): DefinedUseQueryResult<TData, TError> (+2 overloads)useQuery } from '@tanstack/react-query';
import { 
const useTRPC: () => TRPCOptionsProxy<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    example: QueryProcedure<{
        input: void;
        output: string;
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>, {
    keyPrefix: false;
}>
useTRPC } from './utils/trpc';

function function Example(): voidExample() {
  const 
const trpc: TRPCOptionsProxy<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    example: QueryProcedure<{
        input: void;
        output: string;
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>, {
    keyPrefix: false;
}>
trpc = 
function useTRPC(): TRPCOptionsProxy<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    example: QueryProcedure<{
        input: void;
        output: string;
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>, {
    keyPrefix: false;
}>
useTRPC();
  const 
const exampleQuery: UseQueryResult<string, TRPCClientErrorLike<{
    transformer: false;
    errorShape: DefaultErrorShape;
}>>
exampleQuery = 
useQuery<string, TRPCClientErrorLike<{
    transformer: false;
    errorShape: DefaultErrorShape;
}>, string, TRPCQueryKeyWithoutPrefix>(options: UndefinedInitialDataOptions<string, TRPCClientErrorLike<{
    transformer: false;
    errorShape: DefaultErrorShape;
}>, string, TRPCQueryKeyWithoutPrefix>, queryClient?: QueryClient): UseQueryResult<string, TRPCClientErrorLike<{
    transformer: false;
    errorShape: DefaultErrorShape;
}>> (+2 overloads)
useQuery(
    
const trpc: TRPCOptionsProxy<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    example: QueryProcedure<{
        input: void;
        output: string;
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>, {
    keyPrefix: false;
}>
trpc.
example: DecorateQueryProcedure<{
    input: void;
    output: string;
    transformer: false;
    errorShape: DefaultErrorShape;
    featureFlags: {
        keyPrefix: false;
    };
}> & DecorateInfiniteQueryProcedure<{
    input: void;
    output: string;
    transformer: false;
    errorShape: DefaultErrorShape;
    featureFlags: {
        keyPrefix: false;
    };
}>
example.
DecorateQueryProcedure<{ input: void; output: string; transformer: false; errorShape: DefaultErrorShape; featureFlags: { keyPrefix: false; }; }>.queryOptions: TRPCQueryOptions
<string, string>(input: void, opts?: UnusedSkipTokenTRPCQueryOptionsIn<string, string, TRPCClientErrorLike<{
    transformer: false;
    errorShape: DefaultErrorShape;
}>, {
    keyPrefix: false;
}> | undefined) => UnusedSkipTokenTRPCQueryOptionsOut<string, string, TRPCClientErrorLike<{
    transformer: false;
    errorShape: DefaultErrorShape;
}>, {
    keyPrefix: false;
}> (+2 overloads)
queryOptions(var undefinedundefined, {
      
refetchOnMount?: boolean | "always" | ((query: Query<string, TRPCClientErrorLike<{
    transformer: false;
    errorShape: DefaultErrorShape;
}>, string, TRPCQueryKeyWithoutPrefix>) => boolean | "always") | undefined
refetchOnMount: false,
      
refetchOnWindowFocus?: boolean | "always" | ((query: Query<string, TRPCClientErrorLike<{
    transformer: false;
    errorShape: DefaultErrorShape;
}>, string, TRPCQueryKeyWithoutPrefix>) => boolean | "always") | undefined
refetchOnWindowFocus: false,
      
refetchOnReconnect?: boolean | "always" | ((query: Query<string, TRPCClientErrorLike<{
    transformer: false;
    errorShape: DefaultErrorShape;
}>, string, TRPCQueryKeyWithoutPrefix>) => boolean | "always") | undefined
refetchOnReconnect: false,
    }),
  );
}

Or for every query, in the query client:

utils/query-client.ts
import { class QueryClientQueryClient } from '@tanstack/react-query';

export function function makeQueryClient(): QueryClientmakeQueryClient() {
  return new new QueryClient(config?: QueryClientConfig): QueryClientQueryClient({
    QueryClientConfig.defaultOptions?: DefaultOptions<Error> | undefineddefaultOptions: {
      DefaultOptions<Error>.queries?: OmitKeyof<QueryObserverOptions<unknown, Error, unknown, unknown, readonly unknown[], never>, "suspense" | "queryKey", "strictly"> | undefinedqueries: {
        refetchOnMount?: boolean | "always" | ((query: Query<unknown, Error, unknown, readonly unknown[]>) => boolean | "always") | undefinedrefetchOnMount: false,
        refetchOnWindowFocus?: boolean | "always" | ((query: Query<unknown, Error, unknown, readonly unknown[]>) => boolean | "always") | undefinedrefetchOnWindowFocus: false,
        refetchOnReconnect?: boolean | "always" | ((query: Query<unknown, Error, unknown, readonly unknown[]>) => boolean | "always") | undefinedrefetchOnReconnect: false,
      },
    },
  });
}

Be careful with the second one if your app mixes static and dynamic queries.