remb docs

note

The hooks provided by @trpc/react-query are a thin wrapper around @tanstack/react-query. For in-depth information about options and usage patterns, refer to their docs on queries.

tsx

function useQuery(

input: TInput,

opts?: UseTRPCQueryOptions;

)

interface UseTRPCQueryOptions

extends UseQueryOptions {

trpc: {

`ssr?: boolean;`

`abortOnUnmount?: boolean;`

`context?: Record<string, unknown>;`

}

Since UseTRPCQueryOptions extends @tanstack/react-query's UseQueryOptions, you can use any of their options here such as enabled, refetchOnWindowFocus, etc. We also have some trpc specific options that let you opt in or out of certain behaviors on a per-procedure level:

trpc.ssr: If you have ssr: true in your global config, you can set this to false to disable ssr for this particular query. Note that this does not work the other way around, i.e., you can not enable ssr on a procedure if your global config is set to false.
trpc.abortOnUnmount: Override the global config and opt in or out of aborting queries on unmount.
trpc.context: Add extra meta data that could be used in Links.

tip

If you need to set any options but don't want to pass any input, you can pass undefined instead.

You'll notice that you get autocompletion on the input based on what you have set in your input schema on your backend.

Example

Backend code

components/MyComponent.tsx

tsx

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

export function MyComponent() {

// input is optional, so we don't have to pass second argument

const helloNoArgs = trpc.hello.useQuery();

const helloWithArgs = trpc.hello.useQuery({ text: 'client' });

return (

`<div>`

  `<h1>Hello World Example</h1>`

  `<ul>`

    `<li>`

      `helloNoArgs ({helloNoArgs.status}):{' '}`

      `<pre>{JSON.stringify(helloNoArgs.data, null, 2)}</pre>`

    `</li>`

    `<li>`

      `helloWithArgs ({helloWithArgs.status}):{' '}`

      `<pre>{JSON.stringify(helloWithArgs.data, null, 2)}</pre>`

    `</li>`

  `</ul>`

`</div>`

);

}

Example​

Example