Configuration Supabase

Supabase est une base de données PostgreSQL hébergée. Elle peut servir vos tables sous forme d'API GraphQL, ce qui permet à Silex de s'en servir comme CMS. Cette page vous mène d'un nouveau projet Supabase à une source de données connectée dans Silex.

Un nouveau projet Supabase n'est pas prêt pour Silex. Il faut d'abord faire trois choses dans Supabase :

1. installer l'intégration GraphQL
2. autoriser l'introspection GraphQL
3. permettre aux visiteurs de lire vos tables

Chaque étape est expliquée ci-dessous.

Créer le projet et une table

1. Sur supabase.com, créez un nouveau projet. Gardez les options de sécurité par défaut

2. Ouvrez le SQL Editor et créez une table. Exemple pour un blog :

   create table blog_posts (
     id bigint primary key generated by default as identity,
     title text not null,
     slug text unique not null,
     excerpt text,
     content text,
     created_at timestamp default now()
   );
   
   insert into blog_posts (title, slug, excerpt) values
     ('Hello Silex', 'hello-silex', 'First post'),
     ('Second post', 'second-post', 'Another one');
   

3. Cliquez sur Run. Supabase pose une question sur la Row Level Security (RLS) : choisissez Run and enable RLS

Ne choisissez pas "Run without RLS". Sans RLS, toute personne qui a votre clé publique peut modifier ou supprimer les lignes de la table, et pas seulement les lire. Votre clé publique se retrouve dans les réglages de votre site : considérez-la comme publique.

Pas d'espace dans les noms de table

Utilisez des noms comme blog_posts, avec _ à la place des espaces. Supabase vous laisse créer une table nommée Test Table 1, mais cette table est exclue de l'API GraphQL, et Silex ne la voit pas.

Installer l'intégration GraphQL

GraphQL n'est pas installé dans un nouveau projet.

1. Dans le menu de gauche, ouvrez Integrations
2. Cherchez GraphQL et ouvrez-le
3. Cliquez sur Install integration, puis confirmez

Autoriser l'introspection et la lecture

Silex lit la liste de vos tables et de vos champs avec une requête GraphQL dite "d'introspection". Supabase bloque cette requête par défaut. Les visiteurs ont aussi besoin du droit de lire vos tables, car RLS bloque tout tant que vous n'avez pas ajouté de règle (policy).

Dans le SQL Editor, exécutez :

comment on schema public is e'@graphql({"introspection": true})';

create policy "Public read" on blog_posts
  for select to anon
  using (true);

Ajoutez la même ligne create policy pour chaque table que vous voulez afficher sur votre site. Cette règle n'autorise que la lecture : personne ne peut modifier vos données avec la clé publique.

Trouver l'URL et la clé

URL : votre point d'accès GraphQL est l'URL de votre projet suivie de /graphql/v1 :

https://VOTRE-PROJET.supabase.co/graphql/v1

L'URL du projet se trouve sur la page d'accueil de votre projet.

Clé : ouvrez Project Settings puis API Keys, et copiez la Publishable key (elle commence par sb_publishable_). L'ancienne clé anon fonctionne aussi.

N'utilisez jamais une clé secret ou service_role dans Silex. Elles donnent un accès complet à votre base de données.

Mauvaise URL

L'explorateur GraphiQL du tableau de bord Supabase envoie ses requêtes à api.supabase.com/platform/.... Cette URL est réservée au tableau de bord, elle ne fonctionne pas dans Silex.

Connecter Silex

1. Dans Silex, ouvrez Settings, puis l'onglet CMS
2. Cliquez sur Add Your First Data Source (ou sur le bouton +)

3. Remplissez le formulaire :

   • Label : un nom pour vous, par exemple Supabase
   • URL : https://VOTRE-PROJET.supabase.co/graphql/v1
   • Ouvrez HTTP Headers et ajoutez deux en-têtes :
     • Authorization avec la valeur Bearer VOTRE_CLE
     • apikey avec la valeur VOTRE_CLE

   

4. Cliquez sur Next. Silex lit votre schéma

5. Choisissez Supabase comme type de backend, puis cliquez sur Apply

   

6. La source de données affiche Connected dans l'onglet CMS

Vos tables sont maintenant disponibles dans les expressions. Voir Lier les données et Boucles pour les afficher.

Erreurs fréquentes

Ces messages s'affichent sous le formulaire quand vous cliquez sur Next.

pg_graphql extension is not enabled : l'intégration GraphQL n'est pas installée. Voir Installer l'intégration GraphQL.

Unknown field "__schema" on type Query : l'introspection est bloquée. Exécutez la ligne comment on schema de Autoriser l'introspection et la lecture.

No fields found in GraphQL schema : la connexion fonctionne, mais Silex ne voit aucune table. Vérifiez que votre table est dans le schéma public et que son nom ne contient pas d'espace.

Les listes sont vides sur votre site : la table a RLS mais pas de règle de lecture. Ajoutez la ligne create policy pour cette table.

En savoir plus

• Connecter une source de données : la boîte de dialogue des sources de données en détail
• Lier les données : afficher vos données dans vos pages
• Supabase : configuration GraphQL : l'introspection et les autres options (en anglais)
• Supabase : Row Level Security : écrire des règles (en anglais)