[RTK Query] 캐싱

포스팅을 너무 RTK Query만 사용하는 것 같긴한데 너무 매력적이라 다른 분들이 혹시라도 보게 되신다면 사용해보셨으면 좋겠다. 과제에서 주로 맡은 파트가 어쩌다보니 리덕스를 자주 맡게되어서 해당 과제를 해결할 때 얻었던 새로운 지식을 정리한다

과제에서 로컬 캐싱과 만료시간을 구현을 해야했다.  일단 직접 리덕스로 구현을 하는 방법과, RTK Query를 사용해서 호다닥해버리는 방법이 있는데, RTK Query를 사용하면 금방하니 직접구현 시도를 하다가 실패한다면 RTK Query를 사용하려 일단 만들어는 보았다.

"XX초가 지나면 캐시에 있는 데이터를 삭제해야 한다"

RTK 쿼리의 주요 기능은 캐시된 데이터의 관리인데, 서버에서 데이터를 가져오면 RTK 쿼리는 Redux 저장소에 데이터를 '캐시'로 저장한다. 동일한 데이터에 대해 추가 요청이 수행되면 RTK 쿼리는 서버에 추가 요청을 보내는 대신 기존 캐시된 데이터를 제공하게된다.

RTK Query는 보면 볼수록 매력이 있다. RTK Query는 기본적으로 캐싱데이터 관리를 따로 설정하지 않아도 해준다. 만약 구독이 제거되면(예: 데이터에 구독한 마지막 구성 요소가 마운트 해제될 때) RTK Query는 일정 시간(기본값 60초) 후에 데이터를 캐시에서 제거해 버린다. 사용자가 직접 조작을 할땐 KeepUnusedDataFor를 전체 적용 혹은 엔트포인트마다 개별 적용하면 된다.

import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";

export const ContentsApi = createApi({
  reducerPath: "ContentsApi",
  baseQuery: fetchBaseQuery({
    baseUrl: "베이스 Url",
  }),
  endpoints: (builder) => ({
    getContents: builder.query({
      query: () => `엔드포인트`,
      // 30초 후에 캐시에서 데이터를 삭제
      keepUnusedDataFor: 30,
    }),
  }),
});
export const { useGetContentsQuery } = ContentsApi;

 

이렇게만 한다면 같은 요청을 보냈을때, 30초가 지나지 않았다면 재요청을 하지 않고 캐시에서 데이터를 가져오게 된다. 사실 기본 시간이 60초가 되어있어서 따로 작성할 필요는 없지만 그렇다면 만들지 않은 것처럽 보이기에 30초를 넣었다.

데이터를 다시 가져오기 

그렇다면 자동으로 기간이 지났을 때, 다시 재요청을 통해 자동으로 가져오게 할 수 없나? 분명히 필요할 때가 있을 것 같다.

이럴땐 refetchOnMountOrArgChange이 있는데, true로 하게되면  쿼리에 대한 새 구독자가 추가될 때 끝점이 항상 다시 가져온다. API 정의 자체가 아니라 개별 후크 호출에 전달된 경우 이는 해당 후크 호출에만 적용된다. 즉, 후크를 호출하는 구성 요소가 마운트되거나 인수가 변경되면 해당 쿼리에 대한 새 구독자를 추가하고 끝점 + 인수 조합에 대한 캐시된 데이터가 이미 존재하는지 여부에 관계없이 항상 다시 가져오게 된다.

number로 하게된다면 

• 쿼리 구독이 생성될 때:
  • 캐시에 기존 쿼리가 있는 경우 해당 쿼리에 대해 현재 시간과 마지막으로 수행된 타임스탬프를 비교합니다.
  • 제공된 시간(초)이 경과하면 다시 가져옵니다.
• 쿼리가 없으면 데이터를 가져옵니다.
• 기존 쿼리가 있지만 마지막 쿼리 이후 지정된 시간이 경과하지 않은 경우 기존 캐시된 데이터를 제공합니다.

이렇게 동작을 하게 된다. 

- 데이터가 지정된 시간을 초과하는 경우 구독 시 다시 가져오기 

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'

export const api = createApi({
  baseQuery: fetchBaseQuery({ baseUrl: '/' }),
  // global configuration for the api
  refetchOnMountOrArgChange: 30,
  endpoints: (builder) => ({
    getPosts: builder.query({
      query: () => `posts`,
    }),
  }),
})

 

- 구성 요소 마운트 시 강제로 다시 가져오기

import { useGetPostsQuery } from './api'

const Component = () => {
  const { data } = useGetPostsQuery(
    { count: 5 },
    // this overrules the api definition setting,
    // forcing the query to always fetch when this component is mounted
    { refetchOnMountOrArgChange: true }
  )

  return <div>...</div>
}

 

이번엔 기업과제를 통해 새롭게 알게된 RTK 쿼리의 캐싱 기본 동작을 한번 보았다. 기회가 된다면 다른 기능들도 익혀서 좀 더 알차게 사용하고싶다.