RTK Query: can I fetch all posts initially, refetch only one post?

[maximforever]

I'm building an app that's very close to the tutorial and I've been stuck on a simple thing for a few days. Just like the tutorial, I have endpoints for getPosts (all) and getPost (one).

I want to:

1. fetch all the posts upfront with getPosts
2. edit one post
3. only invalidate that one post
4. only refetch that one post.

So far, I've only been able to get these two scenarios:

1. Initially fetch each post individually with a getPost, which causes the post to be invalidated and refetched after it's edited. The problem is that I have numerous requests to fetch the initial posts. (GET post1, GET post2, etc...)
2. Initially fetch all posts in one request. But, after I edit a single post, ALL of them are invalidated and refetched.This has UX consequences, where a user touches one post, and sees multiple posts change.

Relevant code:

  tagTypes: ['User', 'Post'],
  endpoints: (builder) => ({
    getPostsByUserId: builder.query<PostInterface[], string | number>({
      query: (id: string | number) => `/user/${id}`,
      providesTags: (result=[]) => {
        return [
          ...result.map(({ id } : {id: string | number}) => {
            return { type: 'Post' as const, id }
          }
        )]
      },
    }),
    getPost: builder.query<PostInterface, string | number>({
      query: (id: string | number) => `/post/${id}`,
      providesTags: (result, error, id) => {
        return [{ type: 'Post' as const, id }]
      },
    }),
    editPost: builder.mutation({
      query: (id) => ({
        url: `/edit`,
        method: 'POST',
        body: {post_id: id},
      }),
      transformResponse: (response: any) => {
        return response.data;
      },
      invalidatesTags: (result, error, id) => {
        return [{ type: 'Post' as const, id }];
      },
    }),    
  }),
});

[maximforever]

Looks like this question is asking something very similar.

[Shrugsy]

There is no inbuilt support for this currently. Besides potentially having tag overlaps, RTK Query will still treat is as a non-normalized cache.

See cache-behavior#no-normalized-or-de-duplicated-cache for some more information on this decision.

Note that RTK Query attempts to maintain references to the unchanged data for a single query. I.e. for your getPosts query, if a refetch for the whole list only changes one item but not others, RTK Query will retain the unchanged objects in the new data.

In terms of options for your situation, if invalidating the entire list isn't suitable for whatever reason, you can:

• omit the getPost endpoint entirely
• use selectFromResult to efficiently pick out the todo you want (effectively getting the todo by ID)
• use a manual cache update such as optimistic updates to update only the affected todo immediately upon or after a mutation

e.g.

// self-defined hook to pick out the todo from the list query
const useGetTodoById = (id: number) => {
  return = useGetTodosQuery(undefined, {
    selectFromResult: (result) => ({
      todo: result.data?.find((todo) => todo.id === id),
      ...result // note: include just the pieces of `result` you care about rather than spreading all of it in order to render-optimize this hook
    })
  });
}

and to update it in the cache manually after your mutation:

    editPost: builder.mutation({
      query: (id) => ({
        url: `/edit`,
        method: 'POST',
        body: {post_id: id},
      }),
      transformResponse: (response: any) => {
        return response.data;
      },
      // explicitly *don't* invalidate tags for the `Post`, since we're updating the cache manually
      async onQueryStarted(id, { dispatch, queryFulfilled }) {
        try {
          const { data: updatedPost } = await queryFulfilled
          const patchResult = dispatch(
            api.util.updateQueryData('getPosts', undefined, (draft) => {
              // find and update the corresponding post in the cache if it exists
              const draftPost = draft.find((_draftPost) => _draftPost.id === updatedPost.id);
              if (!draftPost) return;
              Object.assign(draftPost, updatedPost);
            })
          )
        } catch {}
      },
    }),