Création d'applications Web de qualité production avec Supabase - Partie 1

(Cet article a été initialement publié sur Baby Programmer)

Je travaille sur le livre de David Lorenz Building Production-Grade Web Applications with Supabase (lien affilié) et je viens de terminer le chapitre 2 - Configuration de Supabase avec Next.js. J'ai rencontré quelques problèmes et j'ai pensé les partager avec la façon dont je les ai résolus.

Section : Initialisation et test du client JavaScript Supabase de base dans Next.js

Erreur : L'analyse du code source Ecmascript a échoué

Il est demandé d'utiliser le code suivant pour vérifier les compartiments Supabase :

useEffect(() => {
    const supabase = createSupabaseClient();
    supabase.storage.listBuckets().then((result) =>
     console.log("Bucket List", result);
    });
}, []);

Malheureusement, cela entraînera l'erreur suivante :

 ⨯ ./src/app/page.js:9:5
 Parsing ecmascript source code failed
   7 |     supabase.storage.listBuckets().then((result) =>
   8 |       console.log("Bucket List", result)
 > 9 |     });
     |     ^
  10 |   }, []);
  11 |
  12 |   return (

Expected ',', got '}'

Heureusement, le correctif est assez simple, ajoutez une accolade ouvrante immédiatement après .then((result) => :

  useEffect(() => {
    const supabase = createSupabaseClient();
    supabase.storage.listBuckets().then((result) => {
      console.log("Bucket List", result)
    });
  }, []);

Erreur : ReferenceError : useEffect n'est pas défini

Une fois l'erreur ci-dessus résolue, nous passons à la suivante :

⨯ ReferenceError: useEffect is not defined
    at Home (src/app/page.js:5:2)
  3 |
  4 | export default function Home() {
> 5 |   useEffect(() => {
    |  ^
  6 |     const supabase = createSupabaseClient();
  7 |     supabase.storage.listBuckets().then((result) => {
  8 |       console.log("Bucket List", result) {
  digest: '3325505329'
}

Le problème est que nous n'avons pas importé useEffect depuis React pour l'utiliser sur cette page. Pour ce faire, c'est simple, ajoutez une importation pour useEffect immédiatement après l'importation pour Image :

import Image from "next/image";
import { useEffect } from "react";
import { createSupabaseClient } from "@/supabase-utils/client";

Erreur : le fichier Ecmascript contenait une erreur

Vous serez immédiatement accueilli avec une autre erreur :

⨯ ./src/app/page.js:2:10
Ecmascript file had an error
  1 | import Image from "next/image";
> 2 | import { useEffect } from "react";
    |          ^^^^^^^^^
  3 | import { createSupabaseClient } from '@/supabase-utils/client';
  4 |
  5 | export default function Home() {

You're importing a component that needs `useEffect`. This React hook only works in a client component. To fix, mark the file (or its parent) with the `"use client"` directive.

 Learn more: https://nextjs.org/docs/app/api-reference/directives/use-client

Heureusement, la solution est encore une fois assez simple. En haut du fichier, ajoutez « use client » ; comme ça :

"use client";

import Image from "next/image";

Section : Utilisation du client Supabase avec Pages Router et App Router

Sous-section : Utilisation de createBrowserClient sur le frontend

Le premier problème que nous rencontrons n'est pas vraiment une erreur, c'est plutôt que certaines instructions peuvent ne pas être tout à fait claires pour certains lecteurs. Le lecteur est invité à mettre à jour la fonction createSupabaseClient pour utiliser createBrowserClient comme ceci :

import { createBrowserClient } from "@supabase/ssr";
export const createSupabaseClient = () => createBrowserClient(...);

Là où se trouve ... il ne faut pas littéralement placer ..., il faut plutôt insérer le contenu qui se trouvait auparavant dans createClient(), par ex. le code final devrait ressembler à :

import { createBrowserClient } from "@supabase/ssr";
export const createSupabaseClient = () =>
    createBrowserClient(
        process.env.NEXT_PUBLIC_SUPABASE_URL,
        process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY
    );

Nous sommes ensuite invités à apporter deux ajustements relativement mineurs au fichier client.js :

Nous renommeons le fichier client.js en navigateurClient.js

Nous renommons createSupabaseClient en getSupabaseBrowserClient

Mais cela crée du travail supplémentaire pour nous, à moins que votre éditeur ne récupère et corrige automatiquement les modifications :

Tout d'abord, nous devons mettre à jour notre import dans page.js :

import { getSupabaseBrowserClient } from "@/supabase-utils/browserClient";

Ensuite, nous devons mettre à jour notre instanciation du client dans page.js :

const supabase = getSupabaseBrowserClient();

On nous dit que :

"Dans VS Code, vous pouvez appuyer sur F2 pour renommer createSupabaseClient. Il sera automatiquement renommé dans tout votre projet. Si vous modifiez un nom de fichier, VS Code doit également récupérer les références et refactoriser le chemin dans les autres fichiers en conséquence."

(J'utilisais le curseur et les modifications n'ont pas été prises en compte... cela aurait certainement pu être la connexion entre la chaise et le clavier dans ce cas)

Sous-section : Utiliser createServerClient sur le backend

Cette section est assez longue et un peu déroutante, comme le reconnaît Lorenz.

Il y a un bloc de code qui prête particulièrement à confusion :

useEffect(() => {
    const supabase = createSupabaseClient();
    supabase.storage.listBuckets().then((result) =>
     console.log("Bucket List", result);
    });
}, []);

À première vue, il peut sembler que nous effectuons deux fois la même étape. Il est facile d'oublier que la première instance modifie les cookies de requête tandis que la seconde modifie les cookies de réponse.

Le reste

J'ai sauté la section sur l'utilisation de createServerClient avec Pages Router, je travaille actuellement sur un nouveau projet, si j'ai besoin de travailler avec un Next.js en utilisant Pages Router, je peux toujours y revenir.

La section sur la connexion directe à la base de données est assez basique, si vous êtes familier avec les bases de données SQL, cela a un sens intuitif.

La section sur l'utilisation de TypeScript concerne principalement l'exécution d'une seule commande pour générer (puis régénérer, si nécessaire) les définitions de type.

Le chapitre se termine par des exemples de base de création d'un client pour Nuxt 3 (Vue) et Python.

La fin

Et c'est la conclusion du chapitre 2. Ce message n'était-il pas simplement captivant ?

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!