React RTK Query 캐시

캐시 태그 시스템

여러 컴포넌트에서 Query Endpoint를 구독하여 Request하는 경우

• 동일한 요청이 여러 번 있을 때 한 번만 서버에 Request한 뒤 캐시 데이터를 돌려씀
• 컴포넌트1 : fetchData() → 서버로 데이터 Request 컴포넌트2 : fetchData() → 캐시 데이터 사용 컴포넌트3 : fetchData() → 캐시 데이터 사용
• 다른 Query여도 캐시 Tag값이 같다면 같은 데이터를 사용하는 것임
• postData1(), providesTags=["Tag1"] postData2(), providesTags=["Tag1"]
• 무효화를 통해 캐시 데이터를 자동 refetch 받아오거나 제거할 수 있음
  // 이 부분은 좀더 공부가 필요함!!
• postData1(), invalidatesTags=[{ type: 'Post', id: 'List' }]

옵션

tagTypes = [ "태그명1", "태그명2"  ] // 사용되는 태그명을 나열
providesTags: (result, error, id) => [{ type: "Review", id }], // 반환된 캐시 데이터에 태그 등록
invalidatesTags: ["태그명1", "태그명2"] // 무효화 시킬 태그명을 나열 → 변경됨을 알려주어서 새 데이터를 다시 받아올 수 있게 함

여러가지 형태로 쓸 수 있다. 보통은 6번 형태로 많이 쓰는듯 하다.

1.['Post'] - equivalent to 2
2.[{ type: 'Post' }] - equivalent to 1
3.[{ type: 'Post', id: 1 }]
4.(result, error, arg) => ['Post'] - equivalent to 5
5.(result, error, arg) => [{ type: 'Post' }] - equivalent to 4
6.(result, error, arg) => [{ type: 'Post', id: 1 }]

캐시 유지시간

• 캐시는 구독자 참조수가 0이된 후 60초(default) 간 유지된다.
• keepUnusedDataFor 값을 통해 이 조절 가능하다.
• 글로벌하게 설정할 수도 있고, 앤드포인트 별로 도 줄 수 있다.

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

export const api = createApi({
  baseQuery: fetchBaseQuery({ baseUrl: '/' }),
  // global configuration for the api
  keepUnusedDataFor: 30,
  endpoints: (builder) => ({
    getPosts: builder.query({
      query: () => `posts`,
      // configuration for an individual endpoint, overriding the api setting
      keepUnusedDataFor: 5,
    }),
  }),
})

캐시 무시하고 강제로 Refetch

• initiate의 옵션 forceRefetch:true 설정

const dispatch = useDispatch();
const { data, refetch } = useGetPostsQuery({ count: 5 });

dispatch(
    api.endpoints.getPosts.initiate(
    { count: 5 },
    { subscribe: false, forceRefetch: true }
  )
)