Accéder à la page github

React Query

Pour mettre en cache nos données, nous avons utilisé un object javascript que nous avons appelé let localCache = [] .

En pratique, nous avons souvent besoin de faire bien plus que de la sauvegarde de données uniquement. Parfois, il arrive de modifier les valeurs et de vouloir les mettre dans notre cache également. Il nous faudra pour celà écrire plusieurs lignes de code, alors que React a déjà un outil le gère qui est React-query.

Terminal

npm install @tanstack/react-query@4.28.0

Dans notre dossier helpers, rajoutons un fichier que nous appellerons getImagesApi. Dans le fichier, nous allons créer une fonction que nous pourrons réutiliser à chaque fois que nous avons besoin d'importer les données.

./src/helpers/getImagesApi.js

const getImagesApi = async () => {
  const apiRep = await fetch("https://mongodb-image-api.vercel.app/api/listCryptoLogo")
  if (!apiRep.ok) {
    throw new Error(`impossible d'importer les données`)
  }
  return apiRep.json()
}


export default getImagesApi

A présent, modifions notre hooks useGetImages.js pour utiliser react-query.

./src/hooks/useGetImages.js

import { useQuery } from "@tanstack/react-query"
import getImagesApi from "../helpers/getImagesApi"


const useGetImages = filter => {
  return useQuery({
    queryKey: ["imageData"],
    queryFn: getImagesApi,
    select: images =>
      images.filter(
        image =>
          image.currency_code.toLowerCase().includes(filter.toLowerCase()) ||
          image.currency_long.toLowerCase().includes(filter.toLowerCase())
      ),
  })
}
export default useGetImages

Ensuite, nous allons permettre à toute notre application d'avoir accès à React query en modifiant notre fichier App.jsx.

./src/App.jsx

import { createRoot } from "react-dom/client"
import { useState } from "react"
import SearchFields from "./components/SearchFields"
import Crypto from "./components/Crypto"
import { BrowserRouter, Routes, Route, Link } from "react-router-dom"
import Infos from "./Infos"
import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
// Create a client
const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: Infinity,
      cacheTime: Infinity,
    },
  },
})


const App = () => {
  const [searchValue, setSearchValue] = useState("")
  return (
    <div className="container">
      <BrowserRouter>
        <Link style={{ textDecoration: "none" }} to="/">
          <h1 className="title">Crypto Logos</h1>
        </Link>


        <Routes>
          <Route path="/infos/:id" element={<Infos />} />
          <Route
            path="/"
            element={
              <>
                <SearchFields searchValue={searchValue} setSearchValue={setSearchValue} />
                <Crypto searchValue={searchValue} />
              </>
            }
          />
        </Routes>
      </BrowserRouter>
    </div>
  )
}


const container = document.getElementById("app")
const root = createRoot(container)
root.render(
  <QueryClientProvider client={queryClient}>
    <App />
  </QueryClientProvider>
)

Modifions ensuite les fichiers Crypto.jsx

./src/components/Crypto.jsx

import ImageBlock from "./ImageBlock"
import useGetImages from "../hooks/useGetImages"
import { Link } from "react-router-dom"


const Crypto = ({ searchValue }) => {
  const results = useGetImages(searchValue)
  return (
    <div className="ListImageContainer">
      {results.isLoading && <div>Chargement....</div>}
      {!results.isLoading &&
        results.data.map(crypto => (
          <Link key={crypto.currency_long} to={`/infos/${crypto.currency_code}`}>
            <ImageBlock crypto={crypto} />
          </Link>
        ))}
    </div>
  )
}
export default Crypto

et Info.jsx :

./src/infos.jsx

import { useParams } from "react-router-dom"
import useGetImages from "./hooks/useGetImages"


const Infos = () => {
  const { id } = useParams()
  const results = useGetImages(id)
  return !results.isLoading ? (
    results.data.length > 0 ? (
      <div
        style={{
          display: "flex",
          justifyContent: "center",
          marginTop: "2rem",
        }}
      >
        <div
          style={{
            display: "flex",
            border: "solid 1px #D7D7D7",
            borderRadius: "8px",
            padding: "1rem",
            alignItems: "center",
            backgroundColor: "#F2F2F2",
          }}
        >
          <img src={results.data[0].link} alt={results.data[0].currency_long} />
          <div style={{ paddingLeft: "1rem" }}>
            <p>
              Nom: <b>{results.data[0].currency_long}</b>
            </p>
            <p>
              Code: <b>{results.data[0].currency_code}</b>
            </p>
          </div>
        </div>
      </div>
    ) : (
      <div>Le code n'existe pas</div>
    )
  ) : (
    <div>Chargement...</div>
  )
}


export default Infos

Relançons notre application, elle devrait de nouveau fonctionner normalement. Pour plus d'informations sur React-query, n'hésitez pas à aller jeter un coup d'oeil à leur documentation.

Accéder au fichier du projet pour cette étape

13-Query

  • .eslintrc.json
  • .gitignore
  • .package.json
  • .prettierrc
  • vite.config.js

Aucune sélection

Sélectionner un fichier