[React-Query] Query Key 관리하기

React-Query는 캐싱을 위해 유니크한 query key를 사용하는데 한 컴포넌트에서 쿼리를 실행한 후 다른 컴포넌트에서 동일한 쿼리를 실행했을때 캐싱되어있는 쿼리가 있다면 가져온다.

이렇게 동일한 캐싱된 데이터를 Key하나로 여기저기서 사용할 수 있는데 이때 쿼리값을 대부분

useQuery(["test"],fetch)

이런식으로 문자열 배열과 같은 값들을 하드코딩 해준다.

내가 생각한 문제

이때 나는 의문이 들었다. 여러 컴포넌트에서 사용할 Key인데 어떻게 무결성을 유지하며 사용할까..?

useQuery(["test"],fetch)

useQuery(["tast"],fetch)

• 다양한 컴포넌트에서 동일한 query를 사용해야할때 오타가 난다면?
• 내가 가져올 데이터를 위한 Query Key가 이미 있는지 개발할때마다 일일히 찾아봐야한다면?
• key를 유지보수 하고자 할때 사용중인 query들을 다 찾아서 일일히 바꿔줘야한다면..??

해결방안 2가지

현재는 두번째 방식을 주로 사용중이지만 문제 해결하기위한 고민 기록용으로 두가지를 모두 적어보았다.

useQuery를 개별 컴포넌트내에서 사용하지 않기 위해 커스텀 훅을 만들어 사용하기

useQuery를 따로 파일로 관리하기때문에 유지보수시에 파일 한가지만 확인하면 되고, 상수로 만든 키를 import하여 사용하기 때문에 key관리에 대한 오타의 위험도 줄이고 유지보수가 용이할 것 같아 고안해보았다.

const USER_QUERY_KEY = ["userInfo"];

const USER_LIST_QUERY_KEY =["userInfoList"]

export {USER_QUERY_KEY, USER_LIST_QUERY_KEY};

import {USER_LIST_QUERY_KEY, USER_QUERY_KEY} from "./KeyUtil";

const API_URL = "https://api.github.com/users/";

const fetcher = (userID) =>
  axios.get(API_URL + userID).then(({ data }) => data);

const useUserQuery = (userID) => {
  return useQuery(USER_QUERY_KEY, () => fetcher(userID), {
    onSuccess: (data) => {
      console.log(`success:${data}`);
    },
  });
};

객체형식의 Key 팩토리 사용하기

매개변수를 받을 수 있는 함수를 객체에 할당하여 입력한 매개변수에 따라 Key를 생성 및 할당해준다.

const todoKeys = {
  all: ['todos'] as const,
  lists: () => [...todoKeys.all, 'list'] as const,
  list: (filters: string) => [...todoKeys.lists(), { filters }] as const,
  details: () => [...todoKeys.all, 'detail'] as const,
  detail: (id: number) => [...todoKeys.details(), id] as const,
}

queryClient.removeQueries(todoKeys.all)

queryClient.invalidateQueries(todoKeys.lists())

queryClient.prefetchQueries(todoKeys.detail(id), () => fetchTodo(id))