TIL47-01 ReactQuery - Instance, Interceptor

• React Query에서 제공하는 기능 중 하나로, 인터셉터를 사용하여 API 호출 전후의 로직을 커스터마이징할 수 있도록 해준다.

• React Query 인스턴스를 생성할 때 queryClient 객체를 만들 수 있는데, 이 객체를 사용하여 인터셉터를 등록할 수 있다.

• queryClient 객체는 setQueryData, setQueryError, setQueryLoading, setQueryState와 같은 여러 메서드를 제공한다.

• 이러한 메서드를 이용하여 인터셉터를 등록하면, 이후에 API 호출 시 인터셉터에서 정의한 로직이 수행된다.

• 예를 들어, queryClient 객체의 setQueryData 메서드를 이용하여 캐시된 데이터를 업데이트할 수 있다. 이는 API 호출 전에 수행된다.

import { QueryClient } from 'react-query';

const queryClient = new QueryClient();

queryClient.interceptors.request.use(async (config) => {
  const cachedData = queryClient.getQueryData(config.queryKey);
  if (cachedData) {
    // 캐시된 데이터가 있을 경우, 해당 데이터로 업데이트한다.
    queryClient.setQueryData(config.queryKey, cachedData);
  }
  return config;
});

• 위 코드는 인터셉터를 등록하여 API 호출 전에 캐시된 데이터를 가져와서 해당 데이터로 쿼리를 업데이트하는 예시다. 이 외에도 interceptors.response.use를 이용하여 API 호출 후에 특정 작업을 수행하는 등의 로직을 추가할 수 있다.

• 다른 예시 코드로는, API 호출 후에 캐시된 데이터를 업데이트하는 경우를 들 수 있다. 이 경우 interceptors.response.use를 이용하여 API 호출이 완료된 후에 캐시된 데이터를 업데이트할 수 있다.

import { QueryClient } from 'react-query';
import { axiosInstance } from './api';

const queryClient = new QueryClient();

queryClient.interceptors.response.use((response) => {
  const { data, config } = response;
  const queryKey = config.queryKey;

  if (queryKey && data) {
    // API 호출 결과를 캐시에 저장한다.
    queryClient.setQueryData(queryKey, data);
  }
  return response;
}, (error) => {
  // API 호출 에러가 발생한 경우, 캐시된 데이터를 사용한다.
  const queryKey = error.config.queryKey;
  const cachedData = queryClient.getQueryData(queryKey);
  if (cachedData) {
    return { data: cachedData };
  }
  throw error;
});

// API 호출을 수행한다.
const fetchTodoList = () => {
  return axiosInstance.get('/todos').then((response) => response.data);
}

// 쿼리를 등록한다.
const todoListQuery = queryClient.query('todoList', fetchTodoList);

• 위 코드에서는 axiosInstance를 이용하여 API를 호출하고, interceptors.response.use를 이용하여 API 호출이 완료된 후에 캐시된 데이터를 업데이트한다.

• 이 때 config.queryKey를 이용하여 캐시된 데이터의 키 값을 가져오고, queryClient.setQueryData를 이용하여 캐시된 데이터를 업데이트한다.

• 또한, interceptors.response.use에서는 API 호출 에러가 발생한 경우, 캐시된 데이터를 사용하는 로직도 추가되어 있다. 이는 캐시된 데이터가 있을 경우, 에러가 발생했을 때에도 캐시된 데이터를 사용하여 화면에 보여줄 수 있도록 해준다.