raw-harlequin

Use Cache ReactQuery

I want to make requests to the server only when the cache is "stale," and otherwise, I want to use ReactQuery's cache. Every time I refresh the page, it makes a new request, and I don't want that. I want it to fetch data from ReactQuery's cache and only make a request to update the data when the cache expiration time is reached. Class where the request code is located:

import { useQuery } from 'react-query';
import Toaster from '../../components/Toaster';
import axiosapi from '../request/axiosInstance';

async function fetchShops(user) {
  const response = await axiosapi.post('/api/getshops', {
    user: user,
  });
  const responseData = response.data;
  const success = responseData.success;
  if (success) {
    return responseData.data;
  } else {
    Toaster({ message: responseData.message, type: 'error' });
    return null;
  }
}

export function useShopsQuery(user) {
  return useQuery('getShops', () => fetchShops(user), {
    staleTime: 1 * 60000, // Cache data for 1 minute
    cacheTime: 1 * 60000, // Cache data for 1 minute
    refetchOnWindowFocus: false,
  });
}

import { useQuery } from 'react-query';
import Toaster from '../../components/Toaster';
import axiosapi from '../request/axiosInstance';

async function fetchShops(user) {
  const response = await axiosapi.post('/api/getshops', {
    user: user,
  });
  const responseData = response.data;
  const success = responseData.success;
  if (success) {
    return responseData.data;
  } else {
    Toaster({ message: responseData.message, type: 'error' });
    return null;
  }
}

export function useShopsQuery(user) {
  return useQuery('getShops', () => fetchShops(user), {
    staleTime: 1 * 60000, // Cache data for 1 minute
    cacheTime: 1 * 60000, // Cache data for 1 minute
    refetchOnWindowFocus: false,
  });
}

How I fetch the data:

const IndexDashboard = ({ userId }) => {
  const { data, isFetching, error } = useShopsQuery(userId);
}

const IndexDashboard = ({ userId }) => {
  const { data, isFetching, error } = useShopsQuery(userId);
}

My index.js:

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { QueryClient, QueryClientProvider } from "react-query";
import { ReactQueryDevtools } from 'react-query/devtools';

const root = ReactDOM.createRoot(document.getElementById("root"));
const queryClient = new QueryClient();
root.render(
  <QueryClientProvider client={queryClient}>
    <App />
    <ReactQueryDevtools />
  </QueryClientProvider>
);

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { QueryClient, QueryClientProvider } from "react-query";
import { ReactQueryDevtools } from 'react-query/devtools';

const root = ReactDOM.createRoot(document.getElementById("root"));
const queryClient = new QueryClient();
root.render(
  <QueryClientProvider client={queryClient}>
    <App />
    <ReactQueryDevtools />
  </QueryClientProvider>
);

Can someone help me figure out what I'm doing wrong?

2 Replies

sensitive-blue•3y ago

So the query cache is stored in memory and when you refresh the page it will be cleared. If you want to persist the data then you can look into this https://tanstack.com/query/latest/docs/react/plugins/persistQueryClient. I believe it will allow you to store query data in local storage between refreshes

Overview | TanStack Query Docs

TanStack Query (FKA React Query) is often described as the missing data-fetching library for web applications, but in more technical terms, it makes fetching, caching, synchronizing and updating server state in your web applications a breeze. Motivation

sensitive-blue•3y ago

But to be honest, if I was using a website I'd expect a full page refresh to give me the latest data, even if I have to wait a bit longer

Gaming

Programming

Use Cache ReactQuery

Did you find this page helpful?