queryOptions 사용을 권장합니다

queryKey와 queryFn을 분리하면 동일한 쿼리 키가 둘 이상의 queryFn과 실수로 함께 사용될 때 예기치 않은 런타임 문제가 발생할 수 있습니다. 이들을 queryOptions(또는 infiniteQueryOptions)로 감싸면 키와 함수가 같은 위치에 배치되어 쿼리를 더 안전하고 쉽게 재사용할 수 있습니다.

규칙 세부 정보

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

/* eslint "@tanstack/query/prefer-query-options": "error" */

function Component({ id }) {
  const query = useQuery({
    queryKey: ['get', id],
    queryFn: () => Api.get(`/foo/${id}`),
  })
  // ...
}

/* eslint "@tanstack/query/prefer-query-options": "error" */

function useFooQuery(id) {
  return useQuery({
    queryKey: ['get', id],
    queryFn: () => Api.get(`/foo/${id}`),
  })
}

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

/* eslint "@tanstack/query/prefer-query-options": "error" */

function getFooOptions(id) {
  return queryOptions({
    queryKey: ['get', id],
    queryFn: () => Api.get(`/foo/${id}`),
  })
}

function Component({ id }) {
  const query = useQuery(getFooOptions(id))
  // ...
}

/* eslint "@tanstack/query/prefer-query-options": "error" */

function getFooOptions(id) {
  return queryOptions({
    queryKey: ['get', id],
    queryFn: () => Api.get(`/foo/${id}`),
  })
}

function useFooQuery(id) {
  return useQuery({ ...getFooOptions(id), select: (data) => data.foo })
}

또한 이 규칙은 QueryClient 메서드 또는 필터에서 직접 타입을 지정하는 대신 queryOptions 결과의 queryKey를 재사용하도록 강제합니다.

이 규칙에 대한 잘못된 queryKey 참조의 예:

/* eslint "@tanstack/query/prefer-query-options": "error" */

function todoOptions(id) {
  return queryOptions({
    queryKey: ['todo', id],
    queryFn: () => api.getTodo(id),
  })
}

function Component({ id }) {
  const queryClient = useQueryClient()
  return queryClient.getQueryData(['todo', id])
}

/* eslint "@tanstack/query/prefer-query-options": "error" */

function todoOptions(id) {
  return queryOptions({
    queryKey: ['todo', id],
    queryFn: () => api.getTodo(id),
  })
}

function Component({ id }) {
  const queryClient = useQueryClient()
  return queryClient.invalidateQueries({ queryKey: ['todo', id] })
}

이 규칙에 대한 올바른 queryKey 참조의 예:

/* eslint "@tanstack/query/prefer-query-options": "error" */

function todoOptions(id) {
  return queryOptions({
    queryKey: ['todo', id],
    queryFn: () => api.getTodo(id),
  })
}

function Component({ id }) {
  const queryClient = useQueryClient()
  return queryClient.getQueryData(todoOptions(id).queryKey)
}

/* eslint "@tanstack/query/prefer-query-options": "error" */

function todoOptions(id) {
  return queryOptions({
    queryKey: ['todo', id],
    queryFn: () => api.getTodo(id),
  })
}

function Component({ id }) {
  const queryClient = useQueryClient()
  return queryClient.invalidateQueries({ queryKey: todoOptions(id).queryKey })
}

사용하지 말아야 하는 경우

코드베이스에서 queryOptions 사용을 강제하지 않으려면 이 규칙이 필요하지 않습니다.

속성

• ✅ 권장(엄격)
• 🔧 수정 가능