reactjs - Redux 工具包查询变异乐观更新

Question

RTKQ 我正在创建一个突变。我正在尝试使用乐观更新方法对其进行更新，但在我找到的示例中，情况总是如此。 postEdit 突变有效。 getPost 请求在 onQueryStarted 中发出并完成。在我的场景中，如果 statusCode 为正，postEdit 不会发送 getPost 请求，而是返回当前发布值作为响应。在这种情况下，我找不到如何更新商店，你有什么想法吗？

Answer 1

这不是使用 RTK 查询或任何其他为您处理重新验证的提取库(如 useSWR)的正确方法。您希望从查询中检索数据并在对该数据进行更改后执行重新验证，以便在每次更改后自动重新执行查询并更新您的 UI。

让我举一个我在我的一个应用程序中使用的例子:

addPost: builder.mutation({
        query: (body) => {
            console.log('ADDING POST', body)
            return {
                url: `add-post`,
                method: 'POST',
                body,
            }
        },

        invalidatesTags: ['Posts'],
        onQueryStarted(body, { dispatch, queryFulfilled }) {
            const patchResult = dispatch(
                socialApi.util.updateQueryData(
                    'getPosts',
                    { _id: body.profileOwner_id, limit: body.limit },
                    (draft) => {
                        console.log('POSTS ARRAY DRAFT', draft)

                        draft.unshift({
                            ...body,
                            shareable: true,
                            title: 'published a new post.',
                            timestamp: new Date(),

                            likes: [],
                        })
                    }
                )
            )
            queryFulfilled.catch(patchResult.undo)
        },
    }),

在这种情况下，我使“帖子”无效，这会在用户添加新帖子后触发对用户帖子的查询。无需手动添加新帖子以响应更改。

如您所见，通过这种方式我可以使用乐观更新实用程序方法 .updateQueryData()，“草稿”是帖子列表，我只需向该数组添加一个新的 Post 对象，然后一旦触发突变，就会自动呈现。