버전: @tanstack/react-query: ^4.32.6

typescript: ^5.1.6

React-query를 사용할때 어떻게 key관리를 잘할까?

쉽게 사용하는 방법이 없을까 하는 것이었다. 고민의 결과 hook 처럼 사용하고 있다.

call 관리가 간편하고 업데이트가 쉽고 로딩처리 에러처리 등등.. 최애 상태관리 라이브러리다.
다음과같이 사용하고 있는데 아주 편한다.

key 관리

다음과 같이 query-key를 객체로 관리

const QUERY_KEYS = {
  USER_INFO: ['user-info'],
  ACCOUNT_VERIFY_INFO: ['account-verify-info']
} as const;

export default QUERY_KEYS;

Hook 형태의 query생성

Query를 hook 처럼사용하면 query key에 대한 생각을 할 필요가 없다.

사실 이런식으로 만들면 query-key에 의미를 부여할 필요도 없이, key겹치지 않게 유니크한 값만 넣어주면 끝!

//index.tsx

...

const USER_INFO = (isSession: boolean = false) => {
  const userInfoAPI = async () => {
    return await Axios.get('/user-info')
      .then((res) => res.data)
      .catch(async (err) => {
        if (err.client_message === 'Bad Request') {
          SIGNOUT();
        }

        return null;
      });
  };

  const { isLoading, isFetching, data, refetch, error, isSuccess, remove } =
    useQuery(QUERY_KEYS.USER_INFO, userInfoAPI, {
      refetchOnWindowFocus: true,
      refetchOnReconnect: false,
      refetchOnMount: false,
      // staleTime: Infinity,
      // cacheTime: Infinity,
      retry: false,
      enabled: isSession
    });
  return {
    userInfo: data as userInfoType,
    isLoading,
    isFetching,
    refetch,
    error,
    isSuccess,
    remove
  };
};

const QUERY_HOOK = {
  PIONEER_VERIFIED_LIST_PAGE
}

export default QUERY_HOOK;

사용시

다음과 같이 특정 페이지 혹은 컴포넌트에서 QUERY_CUSTOM.USER_INFO 를 실행 시켜 사용하면된다.

추가로 react query의 장점이라면 여러게의 컴포넌트에서 사용하더라도 api call을 단 한번 만 하게 해준다는점이다.

각 컴포넌트에서 api 호출후 state를 update 하게 된다면 다중 call되지 않도록 추가적인 작업이 필요하지만, 그러지 않아도 자동으로 되는점이 아주 편한다.

'use client';
import React, { useState } from 'react';
...
import QUERY_HOOK from './_query';
import useAccountStore from './_store';

export default function AccountSetting() {
  const {
    userInfo,
    isLoading: isLoadingUserInfo,
    isFetching: isFetchingUserInfo
  } = QUERY_CUSTOM.USER_INFO();

  ...

  return (
    <AccountSettingPageStyle>
      <h2>Account Settings</h2>
      <div className="inner__container">
       ...
        <DisabledBox className="disabled__box">
          {userInfo?.user?.email}
        </DisabledBox>

        <h4>Display Name</h4>
        <div className="notification">
          <p>* Nickname can only ...</p>
        </div>
        <DisabledBox className="disabled__box">
          {userInfo?.user?.nickname ? userInfo?.user?.nickname : ''}
        </DisabledBox>
        ...
    </AccountSettingPageStyle>
  );
}