问题描述
在我的 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" }),});
export const {
useAddSampleMutation,useGetSamplesQuery,useDeleteSampleMutation,} = lithologyApi;
我不知道它是否相关,但成功使其无效的突变 (addSample
) 位于不同的组件中,而不相关的 (deleteSample
) 则位于相同的组件中(我已经尝试将其移至另一个组件,但无论如何它都不起作用)。
解决方法
所以,只是在这里给出一个答案,以便其他人可以使用它:
我假设您的 deleteSample
端点给出了一个空响应。默认情况下,fetchBaseQuery
的 responseHandler
设置为 json
,因此它尝试 JSON.parse
一个空字符串 - 并因未处理的错误而崩溃。
未捕获的语法错误:JSON.parse:JSON 数据第 1 行第 1 列的数据意外结束
现在,invalidateTags
仅在成功和已处理 错误时调用,而不是在未处理错误的情况下调用,因为这会导致各种不可预测的行为,以防您invalidateTags
不是数组,而是函数。
长话短说:在您的请求中,将 responseHandler
设置为 text
或自定义函数。
此外,始终读取错误 - 当您从钩子返回上面读取该错误时,它应该已经变得非常明显:)