Redux 工具包查询：从 "mutation" 响应中减少状态

Question

假设我有一个 RESTish API 来管理“posts”。

GET /posts returns 所有 posts
PATCH /posts:id 更新一个 post 并用新的记录数据进行响应

我可以通过这样的方式使用 RTK 查询来实现：

const TAG_TYPE = 'POST';

// Define a service using a base URL and expected endpoints
export const postsApi = createApi({
  reducerPath: 'postsApi',
  tagTypes: [TAG_TYPE],
  baseQuery,
  endpoints: (builder) => ({
    getPosts: builder.query<Form[], string>({
      query: () => `/posts`,
      providesTags: (result) =>
        [
          { type: TAG_TYPE, id: 'LIST' },
        ],
    }),
    updatePost: builder.mutation<any, { formId: string; formData: any }>({
      // note: an optional `queryFn` may be used in place of `query`
      query: (data) => ({
        url: `/post/${data.formId}`,
        method: 'PATCH',
        body: data.formData,
      }),
      // this causes a full re-query.  
      // Would be more efficient to update state based on resp.body
      invalidatesTags: [{ type: TAG_TYPE, id: 'LIST' }],
    }),
  }),
});

当 updatePost 运行时，它使 LIST 标签无效，导致 getPosts 再次变为运行。

但是，由于 PATCH 操作本身以新数据响应，我想避免发出额外的服务器请求，而只是使用 [=18] 的内容更新该特定记录的缩减程序状态=].

这似乎是一个常见的用例，但我正在努力寻找有关执行此类操作的任何文档。

Answer 1

您可以稍后应用 optimistic updates 中描述的机制：

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query'
import { Post } from './types'

const api = createApi({
  // ...
  endpoints: (build) => ({
    // ...
    updatePost: build.mutation<void, Pick<Post, 'id'> & Partial<Post>>({
      query: ({ id, ...patch }) => ({
        // ...
      }),
      async onQueryStarted({ id, ...patch }, { dispatch, queryFulfilled }) {
        const { data } = await queryFulfilled
        dispatch(
          api.util.updateQueryData('getPost', id, (draft) => {
            Object.assign(draft, data)
          })
        )
      },
    }),
  }),
})

Redux 工具包查询：从 "mutation" 响应中减少状态

Redux Toolkit Query: Reduce state from "mutation" response

redux-toolkit

rtk-query