PocketBase-useFetch Hook

Le hook usePBFetch est un hook personnalisé pour récupérer des données à partir de PocketBase. Il facilite les appels API et la gestion des données dans votre application React. Il est important d'avoir des bases en TypeScript afin d'utiliser ce hook !

Exemple d'utilisation

Pour utiliser le hook usePBFetch, vous devez suivre les étapes suivantes :

1. Importez le hook dans votre composant :

   import { usePBFetch } from './hook/usePBFetch';

2. Récupérer un seul enregistrement

    const { data, loading, error } = usePBFetch<ExempleTableRecord>({
      collectionName: COLLECTIONS.TEST,
      method: FETCH_METHOD.GET_ONE,
      fetchOnLoad: true,
      params: [id],
    });

   Il est important d'utiiser des constantes génériques pour vos noms de méthodes et collections afin d'éviter tout erreur et gagner en lisibilité !

   A NOTER : L'objet ExempleTableRecord est ici une representation sous forme d'objet de votre table / collection côté API.

3. Supprimer un enregistrement :

   const {
     data: deleteData,
     loading: deleteLoading,
     error: deleteError,
     fetchData: removeData,
   } = usePBFetch<ExempleTableRecord>({
     collectionName: COLLECTIONS.TEST,
     method: FETCH_METHOD.DELETE,
     fetchOnLoad: false,
     params: [id],
    });
    
    // Utiliser removeData pour supprimer l'enregistrement

   Note : Vous pouvez utiliser plusieurs paramètres si votre API demande une id et un email par exemple, vous pouvez faire params: [id, mail] ATTENTION ! L'ordre est important.

4. Récupérer une liste complète

    const { data, loading, error } = usePBFetch<ExempleTableRecord[]>({
      collectionName: COLLECTIONS.TEST,
      method: FETCH_METHOD.GET_FULL_LIST,
      fetchOnLoad: true,
    });

5. Exemple de rendu HTML

   <p className='text-xl my-5'>
    Message (id: {data.id}) <br></br>
    Reçu le {new Date(data.created).toLocaleString().replace(' ', ' à ')}
   </p>