为什么来自 RTK 查询的 updateQueryData 没有更新我的状态？

Question

我正在使用 RTK 查询，我想用转换请求的结果覆盖状态。我通过调用 getTodosOverview 查询来获取 todos 数组的概览。之后，我调用了一个 updateTodos 查询，这返回了一个包含待办事项的新数组。我想用这些结果覆盖原始数组。我正在使用函数 updateQueryData 但它似乎不起作用。我在这里错过了什么？

export const todosApi = createApi({
    reducerPath: 'todosApi',
    baseQuery: fetchBaseQuery({ baseUrl: 'api/todos' }),
    endpoints: (builder) => ({
      getToDosOverview: builder.query<Array<ToDos>, string>({
        query: () => `getOverview`,
        transformResponse: (rawResult: { data: Array<ToDos> }) => rawResult.data,
        keepUnusedDataFor: 0,
      }),
      updateTodos: builder.mutation<Array<ToDos>, string>({
        query: (fileId) => ({
          url: `updateTodos?fileId=${fileId}`,
          method: 'POST',
        }),
        transformResponse: (rawResult: { data: Array<ToDos> }) => rawResult.data,
        async onQueryStarted(uniqueIdentifier, { dispatch, queryFulfilled }) {
          const { data }= await queryFulfilled;
          // Update state with new data from response
          const patchResult = dispatch(
            todosApi.util.updateQueryData(
              'getToDosOverview',
              uniqueIdentifier,
              () => {
                return data;
              }
            )
          );
        },
      }),
    }),
  });

Answer 1

嗯，你没有返回任何新东西。

          const patchResult = dispatch(
            todosApi.util.updateQueryData(
              'getToDosOverview',
              uniqueIdentifier,
              // here you are getting the old state as a variable called `ToDos`
              (ToDos: Array<ToDos>) => {
                // and here you return that old state without any change
                return ToDos;
              }
            )
          );

此外，您在收到回复之前就这样做了。

响应将在行后可用

await queryFulfilled;

所以你可能想做类似

的事情

const { data } = await queryFulfilled

然后使用data作为新值。

一般来说，您似乎 copy-pasting 来自“乐观更新”示例。请改为查看 pessimistic updates 的示例。

此外，如果您想更新 useGetToDosOverviewQuery()，您的代码使用了错误的参数。您正在此处更新 useGetToDosOverviewQuery(uniqueIdentifier)。

你应该打电话给

todosApi.util.updateQueryData('getToDosOverview', undefined, ...)

为什么来自 RTK 查询的 updateQueryData 没有更新我的状态？

Why is updateQueryData from RTK query not updating my state?

reactjs

immer.js

redux-toolkit

rtk-query