CODEWITHSUNDEEP
reactjsredux-toolkitrtk-query
Diksha Goyal
Diksha Goyal

Reputation: 310

FetchBaseQuery refetch data for server side pagination

I am having a use-case where the data is being displayed in a server-side paginated table. When the user clicks on next page, data is fetched and stored in memory to avoid multiple API calls. There is a refresh button with the table on click of it the expected behaviour is to refresh the data displayed.

Let say the user is currently viewing the data for the 10th Page and then clicks Refresh. I have decided to reset the table at that moment and display the 1st page details to the user and the user will have to click & fetch more data for further pages. But what is happening is the data for the first page gets served by the API while for the further pages it is fetched from the cache

I am wondering if there's any way to invalidate all the cache for this API when the user clicks on refresh button.

Here's some of the code for the same:

  const [skip, setSkip] = React.useState<boolean>(false);
  const [request, setRequest] = React.useState({});
  const [currentPageIndex, setCurrentPageIndex] = React.useState(1);
  let { data, error, isFetching, refetch } = useQuery(request,{skip});
  const refreshDetails = () => {
    setSkip(false);
    setCurrentPageIndex(1);
    setRequest({
      test: true,
      index: currentPageIndex
    });
    setTimeout(() => {
      refetch();
    }, 0);
  };

Upvotes: 1

Views: 283

Answers (1)

phry
phry

Reputation: 44086

In that case, you could add a providesTags: ["Table"] to the endpoint and instead of calling refetch, you could do dispatch(api.util.invalidateTags(["Table"]))

Upvotes: 3

Related Questions