쿼리 비활성화

쿼리를 비활성화하려면 skipToken을 useQuery, useInfiniteQuery, useSubscription의 첫 번째 인자로 전달할 수 있습니다. 이렇게 하면 쿼리가 실행되지 않습니다.

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