javascript - Redux RTK Query: Neplatné len jeden prvok zo zoznamu

Pre RTK dotaz som definoval nasledujúce 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;

Chcel by som, aby toto fungovalo tak, že keď sa updatePost úspešne zavolá, invalidoval by sa len cache pre jeden príspevok a použil by sa dotaz getPost na znovuzaťaženie informácií namiesto getAllPosts. Je to nejako možné? Príspevky sú zobrazené v tabuľke, ktorá je načítaná pomocou dotazu getAllPosts.

Odpoveď č. 1

Nie. RTK-Query je vyrovnávacia pamäť dokumentov (úplná odpoveď=dokument), nie normalizovaná vyrovnávacia pamäť. Nevie nič o obsahu uložených odpovedí ani o ich štruktúre - a nikdy sa nebude pokúšať nič tam samostatne „spájať“.

Môžete to urobiť manuálne s optimistickou aktualizáciou, ale všetko, čo RTK-Q robí automaticky, je opätovné načítanie, čo by malo byť vo väčšine prípadov viac než dosť.

Odpoveď č. 2

Tento prípad môžete riešiť manuálnou aktualizáciou cache buď pesimisticky, alebo optimisticky v endpoint-e updatePost.

Použijeme metódu updateQueryData v rtk api na aktualizáciu už existujúcej položky v cache

Pre pesimisticky musíte vrátiť novú verziu príspevku ako výsledok vašej mutácie. Potom aktualizujete medzipamäť zoznamu tak, že nájdete príspevok na aktualizáciu v zozname :

     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);
                           }
                      })
                    );
                  
              }
         }),