getQueryKey

비공식 베타 번역

이 페이지는 PageTurner AI로 번역되었습니다(베타). 프로젝트 공식 승인을 받지 않았습니다. 오류를 발견하셨나요? 문제 신고 →

router나 procedure를 인수로 받는 getQueryKey 헬퍼를 제공하므로, 네이티브 함수에 올바른 쿼리 키를 쉽게 전달할 수 있습니다.

tsx
// Queries
function getQueryKey(
  procedure: AnyQueryProcedure,
  input?: DeepPartial<TInput>,
  type?: QueryType; /** @default 'any' */
): TRPCQueryKey;
// Routers
function getQueryKey(
  router: AnyRouter,
): TRPCQueryKey;
// Mutations
function getQueryKey(
  procedure: AnyMutationProcedure,
): TRPCQueryKey;
type QueryType = "query" | "infinite" | "any";
// for useQuery ──┘         │            │
// for useInfiniteQuery ────┘            │
// will match all ───────────────────────┘

tsx
// Queries
function getQueryKey(
  procedure: AnyQueryProcedure,
  input?: DeepPartial<TInput>,
  type?: QueryType; /** @default 'any' */
): TRPCQueryKey;
// Routers
function getQueryKey(
  router: AnyRouter,
): TRPCQueryKey;
// Mutations
function getQueryKey(
  procedure: AnyMutationProcedure,
): TRPCQueryKey;
type QueryType = "query" | "infinite" | "any";
// for useQuery ──┘         │            │
// for useInfiniteQuery ────┘            │
// will match all ───────────────────────┘

참고

any 쿼리 타입은 해당 react query 메서드에서 퍼지 매칭(fuzzy matching)을 사용하는 경우에만 캐시의 모든 쿼리와 일치합니다. 자세한 내용은 TanStack/query#5111 (comment)을 참조하세요.

tsx
import { useIsFetching, useQueryClient } from '@tanstack/react-query';
import { getQueryKey } from '@trpc/react-query';
import { trpc } from '~/utils/trpc';
function MyComponent() {
  const queryClient = useQueryClient();
  const posts = trpc.post.list.useQuery();
  // See if a query is fetching
  const postListKey = getQueryKey(trpc.post.list, undefined, 'query');
  const isFetching = useIsFetching(postListKey);
  // Set some query defaults for an entire router
  const postKey = getQueryKey(trpc.post);
  queryClient.setQueryDefaults(postKey, { staleTime: 30 * 60 * 1000 });
  // ...
}

tsx
import { useIsFetching, useQueryClient } from '@tanstack/react-query';
import { getQueryKey } from '@trpc/react-query';
import { trpc } from '~/utils/trpc';
function MyComponent() {
  const queryClient = useQueryClient();
  const posts = trpc.post.list.useQuery();
  // See if a query is fetching
  const postListKey = getQueryKey(trpc.post.list, undefined, 'query');
  const isFetching = useIsFetching(postListKey);
  // Set some query defaults for an entire router
  const postKey = getQueryKey(trpc.post);
  queryClient.setQueryDefaults(postKey, { staleTime: 30 * 60 * 1000 });
  // ...
}