redux-toolkit: Problems with providesTags/invalidatesTags

Im trying to invalidate a query request with a mutation request, but cant find how to do it. Im passing [‘Transaction’] as tag but nothing happens

API.ts

export const whitelabelAPI = createApi({
  baseQuery: fetchBaseQuery({
    baseUrl: endpoints.url_whitelabel_api,
  }),
  tagTypes: ['Transaction'],
  endpoints: () => ({}),
});

endpoint.ts

import whitelabelAPI...

const apiWithTag = whitelabelAPI.enhanceEndpoints({
  addTagTypes: ['Transaction'],
});

const extendedApi = apiWithTag.injectEndpoints({
  endpoints: (build) => ({


    // Query that providesTags
    listTransactions: build.query<RequestResult, FindOptions>({
      query: ({
        page,
        perPage,
        status,
        startDate,
        endDate,
        startMoney,
        endMoney,
        id,
        type,
      }) => ({
        url: `/transaction`,
        params: {
          page,
          perPage,
          status,
          startDate,
          endDate,
          startMoney,
          endMoney,
          id,
          type: JSON.stringify(type),
        },
      }),
      providesTags: ['Transaction'],
      transformResponse: (response: RequestResult) => ({
        page: response.page,
        total: response.total,
        transactions: response.transactions,
        formattedTransactions: formatTransactions(response.transactions),
      }),
    }),


    // Mutation that invalidates tags
    approveOrDeny: build.mutation<Transaction, ApproveOrDeny>({
      query: ({ accountPassword, transactionId, type, reason }) => ({
        url: `/transaction/approve-deny/${transactionId}`,
        body: {
          accountPassword,
          type,
          reason,
        },
        method: 'POST',
      }),
      invalidatesTags: ['Transaction'],
    }),
  }),
});

About this issue

  • Original URL
  • State: closed
  • Created 2 years ago
  • Reactions: 1
  • Comments: 27 (19 by maintainers)

Most upvoted comments

Tbh. I’m not sure from the back of my mind. You might be able to just call refetch from any of the components using the mutation with the fixedCacheKey.

@nichita-pasecinic A “query” is the mental concept of “something that gets data”. It is not bound to GET, POST or even HTTP. It could be an RCP call or a local function call. If you are using fetchBaseQuery, all query functions (both for mutations and queries) share the same possible arguments and will result in a fetch call. Change your endpoint type from mutation to query and it will be a query that does a POST.

@nichita-pasecinic no, mutation results are not data you keep around for long and they are not synchronized in any way