4

在我的 api 上，我有两个突变，奇怪的是，其中一个确实触发了重新获取，但另一个没有，我不知道为什么。两种突变都会调用它们的网络，并且更改会反映在服务器中。

这是我的 api 定义。

import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/dist/query/react";
import Sample from "core/types/Sample";
import getApiURL from "core/utils/getApiURL";

export const lithologyApi = createApi({
  baseQuery: fetchBaseQuery({ baseUrl: getApiURL() }),
  tagTypes: ["Samples"],
  endpoints: build => ({
    addSample: build.mutation<Sample, Sample>({
      query: sample => ({
        url: `lithology/add-sample`,
        method: "POST",
        body: sample,
      }),
      invalidatesTags: ["Samples"],
    }),
    getSamples: build.query<Sample[], void>({
      query: () => "lithology/get-samples",
      providesTags: ["Samples"],
    }),
    deleteSample: build.mutation<void, number>({
      query: id => ({ url: `lithology/delete-sample/${id}`, method: "DELETE" }),
      invalidatesTags: ["Samples"],
    }),
  }),
});

export const {
  useAddSampleMutation,
  useGetSamplesQuery,
  useDeleteSampleMutation,
} = lithologyApi;

我不知道它是否相关，但成功使 ( addSample) 它无效的突变位于不同的组件中，而无效的突变 ( ) 它位于相同的组件deleteSample中（我已经尝试将其移至另一个组件但它没有无论如何都不起作用）。

4

2 回答 2

1

就我而言，这与不将中间件添加到configureStore.

export const lithologyApi = createApi({
// ....
});

const store = configureStore({
    // ....

    // Adding the api middleware enables caching, invalidation, polling,
    // and other useful features of `rtk-query`.
    middleware: [
        lithologyApi.middleware,
    ],
});
于 2021-10-06T15:57:06.143 回答
1

所以，只是在这里给出一个答案，以便其他人可以使用它：

我假设您的deleteSample端点给出了一个空的响应。默认情况下，fetchBaseQuery'sresponseHandler设置为json，因此它会尝试JSON.parse使用空字符串 - 并因未处理的错误而崩溃。

未捕获的 SyntaxError：JSON.parse：JSON 数据的第 1 行第 1 列的数据意外结束

现在，invalidateTags仅在成功和已处理invalidateTags错误时调用，但在未处理错误的情况下不调用，因为如果您的不是数组而是函数，这将导致各种不可预测的行为。

长话短说：在您的请求中，设置responseHandler为text或自定义功能。

此外，始终阅读错误 - 当您从钩子中读取上面的错误时，它应该已经变得非常明显:)

于 2021-06-29T21:33:01.890 回答