Redux RTK Query: Invalidating only single element from list

user_1118878 0
Viewed 1438

I have the following API defined for the RTK query:

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;

What I would like this to do is that when updatePost is called succesfully, it would only invalidate cache for a single post and use the getPost query to refetch the information instead the getAllPosts. Is this anyway possible? The posts are shown in a table fetched with the getAllPosts query.

rtk-query react-redux redux javascript
1 Answers

No. RTK-Query is a document cache (full response = document), not a normalized cache. It does not know anything about the contents of the cached responses and their structure - and it will never try to "stitch" anything in there by itself.

You can do that manually with an optimistic update, but everything RTK-Q does automatically is refetch, which should be more than enough in most use cases.

user_20759440
Related