데이터 패칭 라이브러리 - TanStack Query (4. 파일 분리와 다중 쿼리)

커스텀 훅과 폴더 분리

이전 포스트와 같이 useQuery() 구문을 컴포넌트 내에 그대로 작성해주는 것은 권장하진 않는다. 따로 폴더를 만들어주어 관리해주는 것이 유지보수와 재사용성에 효율적이기 떄문이다. 다음과 같은 분리를 권장한다.

1. 쿼리및 데이터에 사용하는 interface를 다른 폴더 및 파일로 분리한다.

export interface I1 {
    name: string;
    description: string;
    subscribers_count: number;
    stargazers_count: number;
    forks_count: number;   
}

export interface Todo {
    id: string;
    title: string;
}
.
.
.

2. 비동기로 호출할 fetch 함수들을 다른 폴더 및 파일로 분리한다.

import axios from 'axios';

export const fetchData1 = () => axios.get('https://api.github.com/repos/tannerlinsley/react-query');            
                                                                
export const getTodos = () => axios.get('/api/todos').then(res => res.data);
                                           
export const postTodo = (todo: any) => axios.post('/api/todo', { todo }).then(res => res.data);           

export const getProjects = (page: number) => axios.get(`/api/projects?page=${page}`).then(res => res.data);
.
.
.

3. useQuery() 를 작성한 커스텀 훅을 담은 폴더 및 파일을 작성한다. 이전 포스트에서 작성했던 예제를 다음과 같이 커스텀훅으로 만들어보았다.

import { useQuery } from '@tanstack/react-query';
import { fecthData1 } from '../fetchs/myApi';
import { AxiosError, AxiosResponse } from 'axios';
import { I1 } from '../types/types';

const useRepoData = () => {
    const { data, isLoading, error } = useQuery<AxiosResponse<I1, AxiosError>>({
        queryKey: ['repoData'],
        queryFn: fecthData1,
    });
    
    return {    
        data, isLoading, error
    };
};

export default useRepoData;

4. 제작한 커스텀 훅을 컴포넌트에 적용한다. 이렇게 만들어진 커스텀훅은 다른 컴포넌트에서도 아래와 같이 단순하게 호출 및 사용이 가능하다는 장점이 있다.

// 기존 useQuery() 호출
const { data, isLoading, error } = useQuery<AxiosResponse<I1, AxiosError>>({
  queryKey: ['exFetch'],
  queryFn: () => axios.get('https://api.github.com/repos/tannerlinsley/react-query'),
});

// 커스텀 훅으로 간단하게 호출
const { isLoading, data, error } = useRepoData();

다중 쿼리 호출

api를 호출 할 때, 일반적으로 하나만 하지 않고, 여러개의 API를 동시에 호출하는 상황이 필요할 수도 있다. 이때 사용하는 훅은 useQueries() 이다. useQuery() 와는 달리, 여러 개의 쿼리에 대한 결과를 배열로 반환한다. 기본 사용법은 아래와 같다.

const queryResults = useQueries({
  queries: [
    { queryKey: ['post', 1], queryFn: fetchPost },
    { queryKey: ['post', 2], queryFn: fetchPost }
  ]
});

인자로 객체가 들어가고, 이 객체 안의 queries 속성 안에 각각의 query 객체를 담은 배열을 넣어준다. 반환값인 queryResults 에도 배열이 오고, 이때 queries 속성 안에 넣어준 query의 순서와 동일한 데이터가 담겨 있다.

이러한 다중 쿼리 호출은 다음과 같은 상황에 사용하면 유용하다

• 여러가지 상품 목록을 나타내는 상품 페이지
• 사용자의 사진, 이름, 포스트 목록 등을 가져오는 프로필 페이지
• 여러 채팅방의 목록을 한번에 가져오는 메시징 앱