Organisation API & Hooks

Le projet sépare les appels réseau et la logique React grâce à deux dossiers principaux : api/ et hooks/.

/api
/hooks
    

1. Dossier api/

Contient toutes les fonctions qui communiquent avec le backend. Chaque fichier correspond à une ressource ou un ensemble de routes.

• Centralise toutes les requêtes HTTP.
• Facilite les modifications si l'URL ou les headers changent.
• Permet la réutilisation des fonctions dans différents contextes (tests, scripts...).

// api/clientApi.js
import axios from "axios";

export const getClientById = async (id) => {
  const response = await axios.get(`http://localhost:8000/client/${id}`);
  return response.data;
};
    

2. Dossier hooks/

Contient les custom hooks React qui utilisent les fonctions du dossier api/. Ils gèrent le chargement, les erreurs, le cache et adaptent les données pour les composants.

• Utilisent les fonctions API pour récupérer ou modifier des données.
• Gèrent les états isLoading, isError, etc.
• Encapsulent la logique React et TanStack Query.

// hooks/useClient.js
import { useQuery } from "@tanstack/react-query";
import { getClientById } from "../api/clientApi";

export const useClient = (id) => {
  return useQuery({
    queryKey: ["client", id],
    queryFn: () => getClientById(id),
  });
};
    

3. Pourquoi séparer api/ et hooks/ ?

• Séparation des responsabilités : api/ pour le backend, hooks/ pour React.
• Réutilisabilité : les fonctions API peuvent être utilisées dans plusieurs hooks.
• Testabilité : tu peux tester la fonction API indépendamment du hook.
• Évolutivité : changer la librairie React Query n'impacte pas l'API.

Résumé

1. api/ : centralise toutes les requêtes HTTP pour les données backend.
2. hooks/ : pont entre l'API et React, gère états, cache et intégration avec TanStack Query.