クエリの無効化

非公式ベータ版翻訳

このページは PageTurner AI で翻訳されました（ベータ版）。プロジェクト公式の承認はありません。 エラーを見つけましたか？ 問題を報告 →

クエリを無効化するには、useQuery、useInfiniteQuery、および useSubscription の第一引数として skipToken を渡します。これによりクエリの実行が防止されます。

skipToken を使用した型安全な条件付きクエリ

tsx
import React, { useState } from 'react';
import { skipToken } from '@tanstack/react-query';
import { trpc } from './utils/trpc';
 
export function MyComponent() {
  const [name, setName] = useState<string | undefined>();
 
  const result = trpc.getUserByName.useQuery(name ? { name: name } : skipToken);
 
  return (
    <div>{result.data?.name}</div>
  );
}

tsx
import React, { useState } from 'react';
import { skipToken } from '@tanstack/react-query';
import { trpc } from './utils/trpc';
 
export function MyComponent() {
  const [name, setName] = useState<string | undefined>();
 
  const result = trpc.getUserByName.useQuery(name ? { name: name } : skipToken);
 
  return (
    <div>{result.data?.name}</div>
  );
}