Rtk 查询总是 returns 缓存数据。 InvalidatesTags 什么都不做

Question

有人能告诉我为什么我在使 getUser 查询无效后仍然得到缓存数据吗？

api.ts:

export const api = createApi({
  reducerPath: 'api',
  baseQuery: fetchBaseQuery({
    baseUrl: REACT_APP_API_URL,
    prepareHeaders: (headers, { getState }) => {
      headers.set('Accept', 'application/json');
      const token = (getState() as RootState).auth.token;
      if (token) {
        headers.set('Authorization', token);
      }
      return headers;
    },
  }),
  tagTypes: [
    'UserGet',
    'UserPost',
  ],
  endpoints: () => ({}),
});

userGetApi.ts:

const userGetApi = api.injectEndpoints({
  endpoints: (builder) => ({
    getUserData: builder.query<UserData, void>({
      query: () => '/users/me',
      providesTags: ['UserGet'],
    }),
  }),
  overrideExisting: true,
});
export const { useGetUserDataQuery } = userGetApi;

userPostApi.ts:

const userPostApi = api.injectEndpoints({
  endpoints: (builder) => ({
    saveUser: builder.mutation<void, OnboardingEntry>({
      query: (userEntries) => {
        const formData = Object.keys(userEntries).reduce((formData, key) => {
          formData.append(key, userEntries[key].toString());
          return formData;
        }, new FormData());
        return {
          url: '/users/update',
          method: 'POST',
          body: formData,
        };
      },
      invalidatesTags: ['UserGet'],
    }),
  }),
  overrideExisting: true,
});

export const { useSaveUserMutation } = userPostApi;

我调用的 2 个钩子：

const { data: { data } = {}, isLoading, isError, isSuccess } = useGetUserDataQuery();
const [saveUser, { isLoading: postIsLoading, isSuccess: postIsSuccess }] = useSaveUserMutation();

调用 saveUser(...) 后，我被重定向到另一个页面。当我重新访问该页面时，我希望看到来自 useGetUserDataQuery() 的更新后的用户数据，但我看到的是以前的数据。即使我关闭并重新打开应用程序，我仍然得到旧数据！

那么我做错了什么？我正在使用文档中所述的 'ProvidesTags' & 'InvalidatesTags'。

Answer 1

因此，经过几天纯粹的挫折后，我找到了解决方案：Api headers.

baseQuery: fetchBaseQuery({
    baseUrl: REACT_APP_API_URL,
    prepareHeaders: (headers, { getState }) => {
      headers.set('Accept', 'application/json');
      headers.set('Cache-Control', 'no-cache');
      headers.set('Pragma', 'no-cache');
      headers.set('Expires', '0');

      const token = (getState() as RootState).auth.token;
      if (token) {
        headers.set('Authorization', token);
      }
      return headers;
    },
  }),

希望这个回答对其他人也有帮助

Rtk 查询总是 returns 缓存数据。 InvalidatesTags 什么都不做

Rtk query always returns cached data. InvalidatesTags not doing anything

react-native

caching

redux-toolkit

rtk-query