[TIL] sparta 55일차 - React-Query 심화

 Query Cancellation

- 비동기 데이터를 가져오는 동안 해당 요청을 중단하고 불필요한 데이터를 받지 않도록 하는 기능

-  컴포넌트가 언마운트되거나 다른 페이지로 이동할 때 불필요한 데이터 요청이 취소되어 성능을 최적화할 수 있다

-  대용량 fetching을 중간에 취소하거나 사용하지 않는 컴포넌트에서 fetching이 진행 중이면 자동으로 취소시켜 불필요한 네트워크 비용을 줄일 수 있다

 

 

QueryFunctionContext

함수에 대한 컨텍스트 정보를 제공하여

개발자가 쿼리 함수 내에서 추가적인 작업을 수행할 수 있도록 한다.

queryFn 은 매개변수로 QueryFunctionContext 이란 객체를 받는다

export const getTodos = async (queryFnContext) => {
  const { queryKey, pageParam, signal, meta } = queryFnContext;
	// queryKey: 배열형태의 쿼리키
	// pageParam: useInfiniteQuery 사용 시 getNextPageParam 실행 시 적용
	// signal: AbortSignal 을 의미 (네트워크 요청을 중간에 중단시킬 수 있는 장치)
	// meta: query에 대한 정보를 추가적으로 메모를 남길 수 있는 string 필드

  const response = await axios.get("http://localhost:5000/todos", { signal });
  return response.data;
};

useQuery({
  queryKey: ["todos"],
  queryFn: getTodos,
})
// example: <div onClick={(event) => {}}

 

 

페이지 이동, 컴포넌트 umount 시 Query 취소

API 요청 시 기본설정은 컴포넌트가 unmount 되도 네트워크 요청은 중단되지 않는다

GET 요청 시 abort signal 이 옵션으로 들어간 경우에만 unmount 시 자동으로 네트워크 취소가 됩니다.

import axios from 'axios'

const query = useQuery({
  queryKey: ['todos'],
  queryFn: ({ signal }) =>
    axios.get('/todos', {
      // Pass the signal to `axios`
      signal,
    }),
})

 

 

수동으로 Query 취소

const query = useQuery({
  queryKey: ['todos'],
  queryFn: async ({ signal }) => {
    const resp = await fetch('/todos', { signal })
    return resp.json()
  },
})

const queryClient = useQueryClient()

return (
  <button
    onClick={(e) => {
      e.preventDefault()
      queryClient.cancelQueries({ queryKey: ['todos'] })
    }}
  >
    Cancel
  </button>
)