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

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

正如你所看到的，这样我就可以使用乐观更新 util 方法.updateQueryData()，“草稿”是 Posts 列表，我只需向该数组添加一个新的 Post 对象，一旦触发突变，该对象就会自动呈现。