쿼리 키의 완전한 종속성

쿼리 키에는 queryFn이 반환하는 데이터를 식별하는 직렬화 가능한 값이 포함되어야 합니다. 이를 통해 쿼리가 서로 독립적으로 캐시되고 해당 값이 변경될 때 쿼리를 자동으로 다시 가져옵니다.

함수 호출 대상은 쿼리 키 의존성이 아닙니다. 예를 들어 fetchTodoById(todoId)에는 쿼리 키에 todoId가 필요하지만 fetchTodoById는 필요하지 않습니다. 중첩된 콜백 내부에서 참조되는 값은 여전히 의존성이므로 promise.then(() => todoId)에도 쿼리 키에 todoId가 필요합니다.

규칙 세부 정보

이 규칙에 맞지 않는 잘못된 코드의 예:

/* eslint "@tanstack/query/exhaustive-deps": "error" */

useQuery({
  queryKey: ['todo'],
  queryFn: () => api.getTodo(todoId),
})

const todoQueries = {
  detail: (id) => ({ queryKey: ['todo'], queryFn: () => api.getTodo(id) }),
}

이 규칙에 맞는 올바른 코드의 예:

const Component = ({ todoId }) => {
  const todos = useTodos()
  useQuery({
    queryKey: ['todo', todoId],
    queryFn: () => todos.getTodo(todoId),
  })
}

const todos = createTodos()
const todoQueries = {
  detail: (id) => ({
    queryKey: ['todo', id],
    queryFn: () => todos.getTodo(id),
  }),
}

// with { allowlist: { types: ["Config"] }}
class Config { ... }
const Component = ({ todoId, config }: { todoId: string, config: Config }) => {
  useQuery({
    queryKey: ['todo', todoId],
    queryFn: () => fetchTodo(todoId, config.baseUrl),
  })
}

옵션

• allowlist.variables: 의존성을 검사할 때 무시해야 하는 변수 이름의 배열
• allowlist.types: 종속성을 검사할 때 무시해야 하는 TypeScript 타입 이름의 배열

{
  "@tanstack/query/exhaustive-deps": [
    "error",
    {
      "allowlist": {
        "variables": ["api", "config"],
        "types": ["ApiClient", "Config"]
      }
    }
  ]
}

사용하지 말아야 하는 경우

쿼리 키 규칙을 신경 쓰지 않는다면 이 규칙은 필요하지 않습니다.

속성

• ✅ 권장
• 🔧 수정 가능