RTK Query 캐쉬 무효화

RTK Query 캐쉬 무효화

상황

• A라는 사람의 데이터를 불러온 다음, 로그아웃 한 뒤, B라는 사람으로 로그인 했지만, rtk query의 캐싱 기능에 의해 A의 데이터가 지워지지 않고 A의 데이터로 렌더링된다.
• 새로고침이나 refetch 등을 사용하면 데이터를 제대로 가져오긴하지만 처음 렌더링 했을 때, 제대로된 데이터를 가져오게 하기 위해 로그아웃시 지정해 놓은 태그의 캐시를 무효화 시킨다.

해결

• 로그아웃시, 해당 태크를 이용하여 캐싱을 무효화한다.
• customerApi

export const customerApi= createApi({
  reducerPath: 'customerApi',
  baseQuery: fetchBaseQuery({
    baseUrl: ``,
    prepareHeaders: (headers, { getState }) => {

      headers.set('Authorization', accessToken || '');
      headers.set('Content-Type', 'application/json');

      return headers;
    },
  }),
  tagTypes: ['CustomerData'],
  endpoints: (build) => ({
    getCustomerData: build.query<customerDataType, void>({
      query: () => 'customer/data',
      providesTags: ['CustomerData'], // 이 캐시 무효화
    }),
  }),
});

• logout 시

dispatch(customerApi.util.invalidateTags(['CustomerData']));