RTK Query query not refetching after mutation

Question

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. Both mutations make their networks calls and changes are reflected in the server.

Here's my api definition.

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;

I don't know if it's relevant but the mutation that succesfully invalidates (addSample) it's in a different component, while the one that doesn't (deleteSample) it's in the same (I've already tried moving it to another component and it didn't work anyways).

Answer 1

So, just to give an answer here so that someone else can maybe use it:

I assume that your deleteSample endpoint was giving an empty response. Per default, fetchBaseQuery's responseHandler is set to json, so it tries to JSON.parse an empty string - and crashes with an unhandled error.

Uncaught SyntaxError: JSON.parse: unexpected end of data at line 1 column 1 of the JSON data

Now, invalidateTags is only called on success and for handled errors, but not in the case of an unhandled error, since that would lead to all kinds of inpredictable behaviour in case your invalidateTags was not an array, but a function.

Long story short: In your request, set responseHandler to text or a custom function.

Also, always read errors - when you read that error above getting back from your hook, it should already become pretty obvious :)