CODEWITHSUNDEEP
reactjsreact-query
George Paouris
George Paouris

Reputation: 645

React useQuery make request to Api even tho the data is cached

I have this simple app where makes a call to an API. Iam using react-query to make the fetch and also to cahche the data. But if you go to network and change to slow 3g, after its state change, it will make the call to API. The docs states react-query that in second attempts the cached data will be returned.

import React, { memo, useState } from "react";
import logo from "./logo.svg";
import "./App.css";
import { useQuery } from "react-query";
import Axios from "axios";

const fetchTodoList = async (key, id) => {
  const { data } = await Axios.get(
    `https://jsonplaceholder.typicode.com/photos`
  );
  return data;
};

function App() {
  const [flag, setFlag] = useState(true);
  const { isLoading, isError, data, error, isFetching } = useQuery(
    "todos",
    fetchTodoList
  );
  console.log(isFetching, data);
  if (isLoading) {
    return <span>Loading...</span>;
  }

  if (isError) {
    return <span>Error: {error.message}</span>;
  }

  // also status === 'success', but "else" logic works, too
  return (
    <>
      <button
        onClick={() => {
          setFlag(!flag);
        }}
      >
        ddddddddd
      </button>
      <ul>
        {data.map((todo) => (
          <li key={todo.id}>{todo.title}</li>
        ))}
      </ul>
    </>
  );
}

export default memo(App);

Upvotes: 0

Views: 967

Answers (1)

Chamsddine Bouzaine
Chamsddine Bouzaine

Reputation: 1579

I think you got the wrong idea about the react-query API it's true that on the second attempt it will return the cached data but in the background, it will also refetch the data from the API so it can keep your app up to date.

Upvotes: 2

Related Questions