バージョン: 11.x

useQuery()

注意

@trpc/react-query によって提供されるフックは、@tanstack/react-query の薄いラッパーです。オプションと使用パターンに関する詳細については、クエリに関するドキュメントを参照してください。

tsx
function useQuery(
  input: TInput,
  opts?: UseTRPCQueryOptions;
)
interface UseTRPCQueryOptions
  extends UseQueryOptions {
  trpc: {
    ssr?: boolean;
    abortOnUnmount?: boolean;
    context?: Record<string, unknown>;
  }
}

tsx
function useQuery(
  input: TInput,
  opts?: UseTRPCQueryOptions;
)
interface UseTRPCQueryOptions
  extends UseQueryOptions {
  trpc: {
    ssr?: boolean;
    abortOnUnmount?: boolean;
    context?: Record<string, unknown>;
  }
}

UseTRPCQueryOptions は @tanstack/react-query の UseQueryOptions を拡張しているため、enabled、refetchOnWindowFocus など、ここであらゆるオプションを使用できます。また、プロシージャごとに特定の動作をオプトインまたはオプトアウトできる、trpc 固有のオプションもいくつかあります。

trpc.ssr： グローバル設定で ssr: true になっている場合、この値を false に設定して、この特定のクエリの ssr を無効にできます。これは逆方向には機能しないことに注意してください。つまり、グローバル設定が false に設定されている場合、プロシージャで ssr を有効にすることはできません。
trpc.abortOnUnmount： グローバル設定を上書きし、アンマウント時にクエリをキャンセルするかどうかをオプトインまたはオプトアウトします。
trpc.context： リンクで使用できる追加のメタデータを追加します。

ヒント

オプションを設定する必要があるが、入力を渡したくない場合は、代わりに undefined を渡すことができます。

バックエンドの input スキーマで設定した内容に基づいて、input でオートコンプリートを取得することに気付くでしょう。

例

バックエンドコード

server/routers/_app.ts
tsx
import { initTRPC } from '@trpc/server';
import { z } from 'zod';
export const t = initTRPC.create();
export const appRouter = t.router({
  // Create procedure at path 'hello'
  hello: t.procedure
    // using zod schema to validate and infer input values
    .input(
      z
        .object({
          text: z.string().nullish(),
        })
        .nullish(),
    )
    .query((opts) => {
      return {
        greeting: `hello ${opts.input?.text ?? 'world'}`,
      };
    }),
});

server/routers/_app.ts
tsx
import { initTRPC } from '@trpc/server';
import { z } from 'zod';
export const t = initTRPC.create();
export const appRouter = t.router({
  // Create procedure at path 'hello'
  hello: t.procedure
    // using zod schema to validate and infer input values
    .input(
      z
        .object({
          text: z.string().nullish(),
        })
        .nullish(),
    )
    .query((opts) => {
      return {
        greeting: `hello ${opts.input?.text ?? 'world'}`,
      };
    }),
});

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>
  );
}

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>
  );
}

例​

例