React에 TypeScript 적용하기 - 5. Tanstack Query 타입 적용하기

1. useQuery에 대한 타입 지정

• TQueryFnData: queryFn의 리턴 데이터 타입
• TError: hook 내에서 발생하는 에러 타입
• TData: select 함수의 리턴 데이터 타입
• TQueryKey: queryKey의 데이터 타입

useQuery<TQueryFnData = unknown, TError = DefaultError, TData = TQueryFnData, TQueryKey extends QueryKey = QueryKey>
useQuery<queryFn리턴타입, 에러타입, select리턴타입, queryKey타입>(options)

---

2. useMutation에 대한 타입 지정

• TData: mutationFn의 리턴 데이터 타입
• TError: hook 내에서 발생하는 에러 타입
• TVariables: mutationFn의 매개변수 타입
• TOnMutateResult: optimistic update 시 onError의 세 번째 매개변수에 해당하는 OnMutateResult 타입

useMutation<TData = unknown, TError = DefaultError, TVariables = void, TOnMutateResult = unknown>(...)
useMutation<mutationFn리턴타입, 에러타입, mutationFn매개변수타입, onMutate의리턴타입>(options)

• Optimistic Update 예시 코드

const queryClient = useQueryClient()

const todoMutation = useMutation({
  mutationFn: updateTodo,
  // When mutate is called:
  onMutate: async (newTodo) => {
    // Cancel any outgoing refetches
    // (so they don't overwrite our optimistic update)
    await queryClient.cancelQueries({ queryKey: ['todos'] })

    // Snapshot the previous value
    const previousTodos = queryClient.getQueryData(['todos'])

    // Optimistically update to the new value
    queryClient.setQueryData(['todos'], (old) => [...old, newTodo])

    // Return a context object with the snapshotted value
    return { previousTodos }
  },
  // If the mutation fails,
  // use the context returned from onMutate to roll back
  onError: (err, newTodo, onMutateResult, context) => {
    queryClient.setQueryData(['todos'], onMutateResult.previousTodos)
  },
  // Always refetch after error or success:
  onSettled: () => {
    queryClient.invalidateQueries({ queryKey: ['todos'] })
  },
})

---

3. useInfiniteQuery에 대한 타입 지정

• TQueryFnData: queryFn의 리턴 데이터 타입
• TError: hook 내에서 발생하는 에러 타입
• TData: select 함수의 리턴 데이터 타입
• TQueryKey: queryKey의 데이터 타입
• TPageParam: pageParam의 데이터 타입

useInfiniteQuery<TQueryFnData, TError = DefaultError, TData = InfiniteData<TQueryFnData>, TQueryKey extends QueryKey = QueryKey, TPageParam = unknown>(...);
useInfiniteQuery<queryFn리턴타입, 에러타입, select리턴타입, queryKey타입, pageParam타입>(options)