Add staleTime

package.json

@@ -16,8 +16,10 @@
     "@emotion/styled": "^11.11.0",
     "@tanstack/react-query": "^5.28.4",
     "@tanstack/react-query-devtools": "^5.28.4",
+    "@types/ms": "^0.7.34",
     "axios": "^1.5.0",
     "framer-motion": "^10.16.4",
+    "ms": "^2.1.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.22.3",

src/hooks/usePokemon.ts

@@ -1,12 +1,14 @@
 import { useQuery } from "@tanstack/react-query";
 import Pokemon from "../models/Pokemon";
 import APIClient from "../services/apiClient";
+import ms from "ms";
 
 const client = new APIClient<Pokemon>('/pokemon');
 
 const usePokemon = (id: number) => useQuery<Pokemon, Error>({
     queryKey: ['pokemon', id],
     queryFn: () => client.get(id),
+    staleTime: ms('24h')
 })
 
 export default usePokemon;

src/hooks/usePokemonByUrl.ts

@@ -1,12 +1,14 @@
 import { useQuery } from "@tanstack/react-query";
 import Pokemon from "../models/Pokemon";
 import APIClient from "../services/apiClient";
+import ms from "ms";
 
 const client = new APIClient<Pokemon>('/api/pokemon');
 
 const usePokemonByUrl = (url: string) => useQuery<Pokemon, Error>({
     queryKey: ['pokemonUrl', url],
     queryFn: () => client.find(url),
+    staleTime: ms('24h')
 })
 
 export default usePokemonByUrl;

src/hooks/usePokemons.ts

@@ -1,12 +1,14 @@
 import { useQuery } from "@tanstack/react-query";
 import APIClient from "../services/apiClient";
 import PokemonResult from "../models/PokemonResult";
+import ms from "ms";
 
 const client = new APIClient<PokemonResult>('/pokemon')
 
 const usePokemons = () => useQuery({
     queryKey: ['pokemons'],
-    queryFn: client.getAll
+    queryFn: client.getAll,
+    staleTime: ms('24h')
 })
 
 export default usePokemons