首页 > 解决方案 > RTK:如何使缓存数据无效以响应更新?

问题描述

我正在尝试使用 RTK Query 使缓存数据无效。但不知何故,它对我不起作用。如果更新的配置文件 ID(在我的情况下为 cognitoID)在 ProfileList 中,我想再次获取 ProfileList。我可以保证将 arg.id(代表 cognitoId)正确传递给 updateProfile 函数,并且 cognitoId 包含在 ProfileList 响应中。

如果我通过provideTags: ["Profile"]and选择粒度较小的选项,则失效有效invalidateTags:["Profile"],但以下设置失败。

function providesProfileList(resultsWithIds, tagType) {
  return resultsWithIds
    ? [
        { type: tagType, id: "LIST" },
        ...resultsWithIds.map(({ id }) => ({
          type: tagType,
          id: resultsWithIds.cognitoId,
        })),
      ]
    : [{ type: tagType, id: "LIST" }];
}

export const idApi = createApi({
  reducerPath: "idApi",
  baseQuery: fetchBaseQuery({
    baseUrl: process.env.REACT_APP_BACKEND_URL,
    prepareHeaders: (headers) => {
      headers.set("Authorization", `Bearer ${localStorage.jwtToken2}`);

      return headers;
    },
  }),
  tagTypes: ["Profile"],
  endpoints: (builder) => ({
     getProfileListViaId: builder.query({
      query: ({ page, placeID, filter, search }) => ({
        url: `users?limit=9${page ? `&offset=${page * 9 - 9}` : ""}${
          placeID ? `&place=${placeID}` : ""
        }${filter && filter.length ? `&${filter}` : ""}${
          search ? `&search=${search}` : ""
        }`,
        method: "GET",
      }),

      providesTags: (result) => providesProfileList(result.data, "Profile"),

      transformResponse: (response) => {
        const obj = {
          data: response.results,
          pageCount: Math.ceil(response.count / 9),
        };

        return obj;
      },
      async onQueryStarted(arg, { dispatch, queryFulfilled }) {
        dispatch(showLoading());
        queryFulfilled.then(
          (res) => {
            dispatch(hideLoading());
          },
          (err) => {
            dispatch(hideLoading());
          }
        );
      },
    }),
    updateProfile: builder.mutation({
      query(data) {
        const { id, body } = data;
        return {
          url: `users/${id}/`,
          method: "PATCH",
          body,
        };
      },

      // Invalidates all queries that subscribe to this Profile `id` only.
      // `getProfileList` *might*  rerun, if this id was under its results.
      invalidatesTags(result, error, arg) {
        console.log(arg.id);
        return [{ type: "Profile", id: arg.id }];
      },
    }),
    
  }),
});

export const {
  //Profile
  useGetProfileListViaIdQuery,
  useUpdateProfileMutation,
} = idApi;

我很高兴任何提示?

标签: reduxredux-toolkitrtk-query

解决方案


推荐阅读