Запрос RTK Query не обновляется после мутации

Question

На моем 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) он в том же (я уже пробовал переместить его в другой компонент, но это все равно не сработало).

Answer 1

Итак, просто чтобы дать ответ здесь, чтобы кто-то другой мог его использовать:

Я предполагаю, что ваш deleteSampleконечная точка давала пустой ответ. По умолчанию fetchBaseQueryустановлен на json, поэтому он пытается JSON.parse пустая строка - и вылетает с необработанной ошибкой.

Uncaught SyntaxError: JSON.parse: неожиданный конец данных в строке 1 столбца 1 данных JSON

Теперь вызывается только в случае успеха и для обработанных ошибок, но не в случае необработанной ошибки, поскольку это привело бы ко всем видам непредсказуемого поведения в случае, если ваша invalidateTags был не массивом, а функцией.

Короче говоря: в вашем запросе установите responseHandler к text или пользовательская функция.

Кроме того, всегда читайте ошибки - когда вы читаете эту ошибку выше, возвращаясь со своего крючка, она уже должна стать довольно очевидной :)

Answer 2

В моем случае это было связано с тем, что промежуточное ПО не было добавлено в 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,
    ],
});

Answer 3

Попробуйте добавить в файл следующую функцию и заменитьprovidedTagsвgetSamplesфункция запроса.

      const providesTags = (result: ReportPinsResponse | undefined) => {
  if (result && result.items) {
    const { items } = result;
    return [...items.map(({ id }) => ({ type: CACHE_TAGS.Samples, id }))];
  }

  return [CACHE_TAGS.Samples];
};

И тогда ваша мутация запроса будет выглядеть так:

      deleteSample: builder.mutation<void, number>({
    query: (id) => ({
      url: `lithology/delete-sample/${id}`,
      method: 'DELETE',
    }),
    invalidatesTags: (_, __, id) => [{ type: CACHE_TAGS.Samples, id }],
    }),

      enum CACHE_TAGS {
  Samples = 'Samples',
}