RTK query not refreshing - why?

Question

I have a RTK query that's not refreshing it's core content after a delete mutation. Could anyone explain why ? It's not clear to me where the problem lies as there is not refresh request made at any point.

The code looks fine and it's pretty much the same I use in another API that's working. And on this second API I pass the same data (a list of items) and it's refreshing fine after a delete ; here's the code:

:

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
import { Auth, API, Storage } from 'aws-amplify';

// Define a service using a base URL and expected endpoints
export const researchApi = createApi({
    reducerPath: 'researchApi',
    tagTypes: ['Research'],
    
    baseQuery: fetchBaseQuery({ 
        baseUrl: process.env.NEXT_PUBLIC_API_RESEARCH,
        prepareHeaders: async (headers, { getState }) => {
            const token = (await Auth.currentSession()).getIdToken().getJwtToken();
            headers.set('Authorization', `${token}`);     
            headers.set('Content-Type', 'application/json');       
            return headers;
        }
    }),
    endpoints: (builder) => ({

      getResearch: builder.query({
        query: () => `research`,
        providesTags: ['Research']
      }),

      getResults: builder.query({
        query: (id) => `results?searchid=${id}`,
      }),

      addResearch: builder.mutation({
        query(keywords) {
            const data = {
                keywords: keywords
            }
          return {
            url: `research`,
            method: 'POST',
            body: data
          }
        },
        invalidatesTags: ['Research']
      }),

      deleteResults: builder.mutation({
        query(results) {

            // send array
            let sanitized;
            sanitized = results.filter(item => item);
            
            const data = {
                items: sanitized
            }
            //console.log('data: ', data);
          return {
            url: `removeresult`,
            method: 'DELETE',
            body: data
          }
        },
        invalidatesTags: ['Research']
      }),
      

    }),
  })
  
// Export hooks for usage in functional components, which are
// auto-generated based on the defined endpoints
export const {  useGetResearchQuery, useGetResultsQuery, useAddResearchMutation, useDeleteResultsMutation } = researchApi

I'm calling the query like this :

    const router = useRouter()
    const { kwd } = router.query
    const { data, error, isError, isLoading } = useGetResultsQuery(kwd);

    if(isLoading) {
        return ( 
            <>
                <Spinner animation="border"  size="sm" role="status" />{' '} Please wait while Loading...
            </>
        )
    }

Any idea would be very helpful as I'm completely lost with this...

Answer 1

Ok so problem solved, I didn't add the correct parameters :

getResearch: builder.query({ query: () => research, providesTags: ['Research'] }),

  getResults: builder.query({
    query: (id) => `results?searchid=${id}`,
     providesTags: ['Research'] // ========> THAT WAS MISSING
  }),