Redux RTK 查询：仅使列表中的单个元素无效

Question

我为 RTK 查询定义了以下 API：

export const postsApi = createApi({
  reducerPath: "postsApi",
  baseQuery: fetchBaseQuery({ baseUrl: 'https://myservice.co/api/v2/' }),
  tagTypes: ["Posts"],
  endpoints: (builder) => ({
    getAllPosts: builder.query({
      query: () => ({ method: "GET", url: "/posts" }),
      transformResponse: (response) => response.posts,
      providesTags: (result) =>
        result
          ? [
              ...result.map(({ id }) => ({ type: "Posts", id })),
              { type: "Posts", id: "LIST" },
            ]
          : [{ type: "Posts", id: "LIST" }],
    }),
    updatePost: builder.mutation({
      query: ({ postId, ...body }) => ({
        url: `/posts/${postId}`,
        method: "POST",
        config: { body },
      }),
      invalidatesTags: (_, __, arg) => [{ type: "Posts", id: arg.id }],
    }),
    getPost: builder.query({
      query: (postId) => ({
        method: "GET",
        url: `/posts/${postId}`,
      }),
      providesTags: (_, __, id) => [{ type: "Posts", id }],
    }),
  }),
});

export const { useGetAllPostsQuery, useUpdatePostMutation, useGetPostQuery } = postsApi;

我希望这样做的是，当成功调用 updatePost 时，它只会使单个帖子的缓存失效，并使用 getPost 查询而不是 getAllPosts 来重新获取信息。这到底有可能吗？这些帖子显示在使用 getAllPosts 查询获取的表中。

Answer 1

不。 RTK-Query 是文档缓存（完整响应 = 文档），而不是标准化缓存。 它对缓存响应的内容及其结构一无所知 - 并且它永远不会尝试自己“缝合”其中的任何内容。

您可以通过乐观更新手动执行此操作，但 RTK-Q 自动执行的所有操作都是重新获取，这在大多数用例中应该足够了。

Answer 2

您可以通过手动更新缓存来处理这种情况 或者乐观地在 updatePost 端点中。

我们将使用 rtk api 中的

updateQueryData

方法来更新已经存在的缓存条目

悲观的是，您必须返回帖子的新版本作为更新的结果。然后，您可以通过在列表中查找要更新的帖子来更新列表缓存：

     updatePost: builder.mutation({
              query: ({ postId, ...body }) => ({
                url: `/posts/${postId}`,
                method: "POST",
                config: { body },
              }),
              invalidatesTags: (_, __, arg) => [{ type: "Posts", id: arg.id }],
              async onQueryStarted({...patch},{dispatch, queryFulfilled}) {
                    //here you can do optimistic update using the patch values
              
                    //or you can wait for the mutation result
                    const {data: updatedPost} = await queryFulfilled;
                    const patchResult = dispatch(
                      postApi.util.updateQueryData('getAllPosts',undefined,(draft)=>{
                          const cachedPost = draft.find(p => p.id === updatedPost.id);
                           if (t) {
                            Object.assign(cachedPost, updatedPost);
                           }
                      })
                    );
                  
              }
         }),