Mutation that invalidates cached data not working

[bn-piar]

Hi guys.

I have an api client

const warehouseApi = createApi({
    reducerPath: 'warehouseApi',
    baseQuery: fetchBaseQuery({ baseUrl: ROOT_ENDPOINT }),
    tagTypes: ['WarehouseProducts'],
    endpoints: (builder) => ({
        getWarehouseProducts: builder.query<TProduct[], string | void>({
            query: (query?: string) => `/warehouse${query ? `?search=${query}` : ''}`,
            providesTags: ['WarehouseProducts'],
        }),
        getProduct: builder.query<TProduct, string>({
            query: (vendorId) => `/warehouse/${vendorId}`,
        }),
        addProduct: builder.mutation<TProduct, Omit<TProduct, 'id'>>({
            query: (body) => ({
                url: '/warehouse/add',
                method: 'POST',
                body,
            }),
            invalidatesTags: ['WarehouseProducts'],
        }),
    }),
});

On the /warehouse page I fetch all warehouse products using the useGetWarehouseProductsQuery hook.
On the /warehouse/add page I add a new product using the useAddProductMutation hook.

I thought providing tags to the client and endpoints would invalidate warehouse products cache after adding a new product but it doesn't.

After adding a new product and returning back to warehouse page the new product is not there until page reload. I even tried to manually refetch the data but it didn't work neither.

I think it's maybe related to components are still using that data condition. If so, how do I force revalidation of a query from a component that doesn't use that query?

[bn-piar]

I forgot to add warehouseApi.middleware to my root store. Oops. Now it's working