I'm having an issue with the Redux refetchOnReconnect option not working even after I have called the setupListener(store.dispatch) in my redux store.tsx file and set refetchOnReconnect=true to the endpoint hook call.
store.tsx file
'use client';
import { configureStore } from "@reduxjs/toolkit";
import { setupListeners } from "@reduxjs/toolkit/query";
import { apiSlice } from "../features/api/apiSlice";
const persistConfig = {
key: 'root',
version: 1,
storage
}
const allReducers = {
[apiSlice.reducerPath]: apiSlice.reducer
};
export const store = configureStore({
reducer: allReducers,
});
setupListeners(store.dispatch)
export type RootState = ReturnType<typeof store.getState>
export type AppDispatch = typeof store.dispatch
apiSlice.tsx file
import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
let url = (process.env.NODE_ENV !== "development") ? process.env.NEXT_PUBLIC_TS_SERVER_URL : process.env.NEXT_PUBLIC_SERVER_APP_BASE_URL;
export const apiSlice = createApi({
reducerPath: "api",
baseQuery: fetchBaseQuery({
baseUrl: url,
}),
tagTypes: [
"Product",
],
endpoints: () => ({}),
});
export default apiSlice;
productApi.tsx file
import apiSlice from "../api/apiSlice";
const productApi = apiSlice.injectEndpoints({
endpoints: (builder) => ({
// get all products
displayProducts: builder.query({
query: ({ page, limit }) => ({
url: `api/product/all?page=${page}&limit=${limit}`,
method: "GET",
}),
providesTags: ["Product"],
refetchOnReconnect: true,
}),
// get product
displayProduct: builder.query({
query: (id) => ({
url: `api/product/${id}`,
method: "GET",
}),
providesTags: ["Product"],
refetchOnReconnect: true,
keepUnusedDataFor: 1,
retries: 3, // Set the number of retry attempts
retryOnUnmountOrReconnect: true
// async onQueryStarted(_, {dispatch, queryFulfilled}){
// dispatch(apiSlice.internalActions.onOnline(refetchOnReconnect))
// }
}),
}),
overrideExisting: module.hot?.status() === "apply",
});
export const {
useDisplayProductsQuery,
useDisplayProductQuery,
} = productApi;
The expected result is to trigger a refetch of data from any endpoint in productApi.tsx whenever there's a network connection. For example, when action {type: '__rtkq/online', payload: undefined} is dispatched, then action api/executeQuery/pending should be called.