react query 컨벤션 - linkarchive/LinkArchive GitHub Wiki

Queyry Key

• 배열로 키를 관리합니다.

// Good 
useQuery(['todos'])

// Bad
useQuery('todos')

Query Key 팩토리

하드코딩을 피하기 위해 팩토리 패턴을 사용해도 좋습니다.

const todoKeys = {
  all: ['todos'] as const,
  lists: () => [...todoKeys.all, 'list'] as const,
  list: (filters: string) => [...todoKeys.lists(), { filters }] as const,
  details: () => [...todoKeys.all, 'detail'] as const,
  detail: (id: number) => [...todoKeys.details(), id] as const,
}

useQuery 규칙

import { useQuery } from '@tanstack/react-query';

useQuery({
  queryKey,
  queryFn,
  onSuccess,
});