简体   繁体   English

"RTK Query 查询在突变后不重新获取"

[英]RTK Query query not refetching after mutation

On my api I have two mutations and strangely, one of them does trigger the refetch but the other doesn't and I have no clue why.在我的 api 上,我有两个突变,奇怪的是,其中一个确实触发了重新获取,但另一个没有,我不知道为什么。 Both mutations make their networks calls and changes are reflected in the server.两种突变都会调用它们的网络,并且更改会反映在服务器中。

Here's my api definition.这是我的 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;

So, just to give an answer here so that someone else can maybe use it:所以,只是在这里给出一个答案,以便其他人可以使用它:

I assume that your deleteSample<\/code> endpoint was giving an empty response.我假设您的deleteSample<\/code>端点给出了一个空响应。 Per default, fetchBaseQuery<\/code> 's responseHandler<\/code> is set to json<\/code> , so it tries to JSON.parse<\/code> an empty string - and crashes with an unhandled error.默认情况下, fetchBaseQuery<\/code>的responseHandler<\/code>设置为json<\/code> ,因此它会尝试JSON.parse<\/code>一个空字符串 - 并因未处理的错误而崩溃。

Uncaught SyntaxError: JSON.parse: unexpected end of data at line 1 column 1 of the JSON data未捕获的 SyntaxError:JSON.parse:JSON 数据的第 1 行第 1 列的数据意外结束

<\/blockquote>

Now, invalidateTags<\/code> is only called on success and for handled<\/em> errors, but not in the case of an unhandled error, since that would lead to all kinds of inpredictable behaviour in case your invalidateTags<\/code> was not an array, but a function.现在, invalidateTags<\/code>仅在成功和已处理<\/em>错误时调用,但在未处理错误的情况下不会调用,因为如果您的invalidateTags<\/code>不是数组而是函数,这将导致各种不可预测的行为。

Long story short: In your request, set responseHandler<\/code> to text<\/code> or a custom function.长话短说:在您的请求中,将responseHandler<\/code>设置为text<\/code>或自定义函数。

Also, always read errors - when you read that error above getting back from your hook, it should already become pretty obvious :)此外,始终阅读错误 - 当您从钩子中读取上面的错误时,它应该已经变得非常明显:)

"

In my case it was related to not adding the middleware<\/a> to configureStore<\/code> .就我而言,这与未将中间件<\/a>添加到configureStore<\/code>有关。

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM