Aller au contenu principal

1-1 Première requête d'API

Tentons d'effectuer une première requête d'API vers Supabase afin de récupérer la liste des projets dans Houdini!

Créer une requête vide​

  1. À partir du menu Workspaces de Postman, sélectionnez un workspace. Vous avez probablement un Workspace appelé My Workspace créé par défaut par Postman. Vous pouvez utiliser My Workspace, mais il pourrait aussi s'agir d'un Workspace que vous auriez créé. Imgur
  2. Une fois dans le Workspace, utilisez le + pour créer une nouvelle requête Imgur
  3. Vous devriez être accueilli par une fenêtre du genre permettant de configurer les détails de la requête Imgur

Configurer Postman pour envoyer la clé d'API​

info

Afin de faire des appels à l'API de Supabase, il vous faudra envoyer votre clé d'API lors de chaque requête. C'est cette clé qui vous identifiera et vous donnera accès à votre projet Supabase.

Pour faire l'envoi de la clé, on utilise l'en-tête de la requête HTTP.

L'en-tête HTTP contient des informations supplémentaires sur la requête.

L'envoi du jeton se fait via l'en-tête de la requête HTTP et Postman permet, via l'onglet Authorization, d'envoyer ce dernier automatiquement lors de l'exécution de la requête.

  1. Sous l'onglet Headers de la requête, vous verrez quelques en-têtes déjà configurées. img

  2. Ajoutez une entrée supplémentaire avec:

    • key: apiKey
    • Value: Votre clé d'API Supabase

    img

Obtenir la liste des projets​

Pour obtenir la liste des projets, il nous faudra faire un appel de type GET à l'URL de base pour les projets.

Obtenir l'URL de base​

Pour obtenir l'URL de base pour communiquer avec votre instance de Supabase, vous pouvez:

  1. Aller dans le projet Supabase
  2. Appuyer sur Project Settings dans le menu principal
  3. Appuyer sur Data API
  4. L'URL de base est celle indiquée dans Project URL

Dans mon cas, l'URL est la suivante:

https://zjywabthssmxcftqcyyo.supabase.co
attention

Ce n'est qu'un exemple, la vôtre sera différente!

Obtenir l'URL d'API complète pour la table projets​

L'URL de base ne vous permet pas d'obtenir les détails des projets. Pour cela, il faut communiquer avec le bon chemin à partir de l'URL de base.

  1. À partir du menu du projet, cliquez sur Table Editor img
  2. Sélectionnez la table projets et cliquez ensuite sur API Docs dans le coin supérieur droit. img
  3. Choisir Bash comme langage puisque c'est le plus proche que nous pouvons obtenir pour le détail d'une requête HTTP à faire avec Postman. img
  4. L'URL complète pour accéder aux projets est la portion juste avant le point d'interrogation (?) img

Dans mon cas, l'URL est la suivante (la vôtre sera différente!):

https://zjywabthssmxcftqcyyo.supabase.co/rest/v1/projets
info

Le format sera toujours le même: Base URL: https://zjywabthssmxcftqcyyo.supabase.co/rest/v1/ Suivi du nom de la table: projets

Faire la requête Postman​

  1. Entrer l'URL complète dans la requête Postman img
  2. Cliquer sur Send
  3. Vous devriez obtenir la liste des projets au format JSON dans la section Response! img

Format de la réponse​

Prenez le temps de bien observer le format de la réponse que vous avez obtenue:

[
    {
        "id": 2,
        "created_at": "2025-06-06T14:56:48.988456+00:00",
        "updated_at": "2025-06-06T14:56:48.988456+00:00",
        "nom": "Lan Party",
        "description": "Organisation du Lan Party",
        "image_url": null
    },
    {
        "id": 3,
        "created_at": "2025-06-06T14:57:08.761115+00:00",
        "updated_at": "2025-06-06T14:57:08.761115+00:00",
        "nom": "Soirée jeux vidéo",
        "description": "Organisation de la soirée jeu vidéo",
        "image_url": null
    },
    {
        "id": 1,
        "created_at": "2025-06-06T14:56:28.961561+00:00",
        "updated_at": "2025-06-06T14:56:28.961561+00:00",
        "nom": "Discreddit",
        "description": "Une description modifiée",
        "image_url": "https://imgur.com/k00Tj9S.png"
    }
]
info

Vous recevez une liste d'objets au format JSON (JavaScript Object Notation).

Puisqu'il s'agit d'une liste d'objets, cette liste est contenue dans un tableau [ ].

Chaque élément du tableau est un objet JSON qui représente une entrée dans la table projets!

Un objet JSON commence toujours par une accolade ({) et se termine par une accolade fermante (}).