invalidateQueries_reactQuery

invalidateQueries

QueryClient에는 쿼리를 오래된 것으로 표시하여 잠재적으로 데이터를 다시 가져올 수 있는 invalidateQueries 메서드를 제공한다
간단하게 얘기해서 PATCH, DELETE된 데이터들을 재호출한다고 생각하면 쉽다

• 모든 쿼리 무료화

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

const queryClient = useQueryClient()

// 캐시의 모든 쿼리를 무효화함
queryClient.invalidateQueries();

// `todos`로 시작하는 키로 모든 쿼리를 무효화함
queryClient.invalidateQueries({ queryKey: ['todos'] })

// 아래 두 쿼리 모두 무효화됨
const todoListQuery = useQuery({
  queryKey: ['todos'],
  queryFn: fetchTodoList,
})
const todoListQuery = useQuery({
  queryKey: ['todos', { page: 1 }],
  queryFn: fetchTodoList,
})

• 구체적인 쿼리 키를 전달하여 특정 쿼리 무효화

queryClient.invalidateQueries({
  queryKey: ['todos', { type: 'done' },
})

// 아래 쿼리는 무효화될 것임
const todoListQuery = useQuery({
  queryKey: ['todos', { type: 'done' }],
  queryFn: fetchTodoList,
})

// 얘는 무효화되지 않음!
const todoListQuery = useQuery({
  queryKey: ['todos'],
  queryFn: fetchTodoList,
})

• 각 쿼리를 구분해서 무효화

// 쿼리 키에 변수나 하위 키가 없음
queryClient.invalidateQueries({
  queryKey: ['todos'],
  exact: true,
})

// 아래 쿼리는 무효화될 것임
const todoListQuery = useQuery({
  queryKey: ['todos'],
  queryFn: fetchTodoList,
})

// 아래 쿼리는 무효화되지 않음
const todoListQuery = useQuery({
  queryKey: ['todos', { type: 'done' }],
  queryFn: fetchTodoList,
})

• predicate 함수를 전달하여 해당 쿼리를 무효화할지 여부에 대해 true or false를 반환 할 수 있다

queryClient.invalidateQueries({
  predicate: query =>
    query.queryKey[0] === 'todos' && query.queryKey[1]?.version >= 10,
})

// 아래 쿼리는 무효화됨
const todoListQuery = useQuery({
  queryKey: ['todos', { version: 20 }],
  queryFn: fetchTodoList,
}),

// 아래 쿼리는 무효화됨
const todoListQuery = useQuery({
  queryKey: ['todos', { version: 10 }],
  queryFn: fetchTodoList,
}),

// 아래 쿼리는 무효화되지 않음
const todoListQuery = useQuery({
  queryKey: ['todos', { version: 5 }],
  queryFn: fetchTodoList,
}),

• 예제

/** 취소 승인처리 */
  const { mutate: mutateApproveCancel } = useMutation(
    () => AxiosApi.patch('/claim/cancel-approve', { claimIds: selectedRows?.map((row) => row.id) }),
    {
      onSuccess: () => {
        queryClient.invalidateQueries(['cancelList', filterForm, currentPage, perPage])
        successSnackbar('취소 승인처리 완료되었습니다.')
      },
    },
  )