Connecter une source de données¶
Pour intégrer du contenu depuis WordPress, Strapi ou n'importe quelle API GraphQL dans Silex, vous devez ajouter une source de données. Cette page vous guide à travers la boîte de dialogue des paramètres.
Ouvrir les paramètres de source de données¶
Dans l'éditeur Silex :
- Ouvrez le panneau Paramètres (généralement dans la barre latérale gauche ou le menu supérieur)
- Cherchez la section Sources de données ou CMS
- Cliquez sur Ajouter une source de données ou le bouton plus
Une boîte de dialogue s'ouvre avec les champs pour la connexion API.
Remplir les informations de base¶
Libellé — Un nom pour cette source de données (par exemple, "Mon site WordPress"). C'est uniquement pour vous dans l'éditeur ; les utilisateurs ne le voient jamais.
URL — Le point d'accès GraphQL. Exemples :
- WordPress :
https://votresite.com/graphql - Strapi :
https://votresite.com/graphql - Supabase :
https://votreprojet.supabase.co/graphql/v1
Consultez la documentation de votre fournisseur d'API pour l'URL exacte du point d'accès.
Type de backend — Sélectionnez la plateforme à laquelle vous vous connectez :
- WordPress — optimisé pour la structure WordPress/WPGraphQL
- Strapi — optimisé pour Strapi
- Supabase — optimisé pour Supabase
- Generic — pour toute autre API GraphQL
Cette sélection aide Silex à fournir des valeurs par défaut intelligentes et de meilleurs indices de type. Si votre API n'est pas dans la liste, choisissez Generic.
Ajouter des en-têtes d'authentification (si nécessaire)¶
Certaines API nécessitent une authentification. Si votre API est protégée par mot de passe ou nécessite une clé API :
- Dans la boîte de dialogue de source de données, cherchez En-têtes ou Authentification
- Cliquez sur Ajouter un en-tête
- Entrez le nom de l'en-tête (généralement
Authorization) - Entrez la valeur de l'en-tête (généralement un jeton ou une clé API)
Exemple pour WordPress avec du contenu privé :
Demandez à votre administrateur WordPress ou fournisseur d'API le format d'en-tête correct.
Tester la connexion¶
Après avoir rempli l'URL et les en-têtes :
- Cliquez sur Tester la connexion ou Vérifier
- Silex tente de récupérer le schéma depuis votre API
- En cas de succès, vous voyez une coche verte et la liste des types disponibles
- En cas d'échec, vous voyez un message d'erreur — vérifiez l'URL et les en-têtes
Erreurs courantes :
- "Connection refused" — l'URL est incorrecte ou l'API est hors service
- "Unauthorized" — vos en-têtes/authentification sont manquants ou incorrects
- "CORS error" — votre API n'autorise pas les requêtes depuis le domaine de Silex (le fournisseur d'API doit configurer cela)
Parcourir les types disponibles¶
Une fois connecté, vous voyez une liste de Types — les structures de données que votre API propose.
Pour WordPress, vous voyez des types comme :
- Post
- Page
- Category
- Author
Cliquez sur un type pour le développer et voir les Champs disponibles :
- Pour Post : title, excerpt, content, featured image, author, date, etc.
Les champs affichent leur type de données (String, Image, List, Object, etc.). Cela vous aide à comprendre quelles données sont disponibles et quel type de valeurs attendre.
Comprendre les types de champs¶
Lorsque vous développez un type et voyez ses champs, chaque champ indique un genre :
Scalar — une valeur unique (chaîne, nombre, date, booléen). Vous pouvez la requêter directement.
Object — une valeur complexe avec ses propres champs. Exemple : le champ "author" d'un article est un objet avec des champs comme name, email, bio.
List — plusieurs éléments d'un type. Exemple : "posts" est une liste d'objets article.
Lorsque vous liez des données dans les composants, vous naviguez à travers ces types — post → author → name signifie naviguer de l'objet article à l'objet auteur pour obtenir la chaîne nom.
Modifier ou supprimer une source de données¶
Une fois ajoutée, votre source de données apparaît dans les paramètres. Pour la modifier :
- Cliquez sur le nom de la source de données ou une icône de modification
- Changez l'URL, les en-têtes ou le libellé
- Cliquez sur Enregistrer
Pour la supprimer :
- Cliquez sur la source de données
- Cherchez un bouton Supprimer ou Retirer
- Confirmez
Supprimer une source de données ne supprime pas les expressions qui la référencent — mais ces expressions afficheront une erreur jusqu'à ce que vous reconnectiez la source ou les mettiez à jour.
Dépannage¶
"Could not connect to the API" — Vérifiez que l'URL est correcte et que l'API est en cours d'exécution. Essayez d'ouvrir l'URL directement dans votre navigateur.
"Endpoint returned an error" — Votre API répond, mais quelque chose ne va pas avec la requête. Vérifiez les en-têtes d'authentification et les paramètres requis.
"Types are loading but incomplete" — L'introspection GraphQL renvoie peut-être un schéma partiel. Essayez de rafraîchir la boîte de dialogue.
Les en-têtes ne sont pas envoyés — Certaines API ont des restrictions CORS. Si Silex ne peut pas s'authentifier même avec les bons en-têtes, demandez à votre fournisseur d'API d'activer CORS pour votre domaine.
- Toujours bloqué ? Ouvrez un ticket sur GitHub avec les étapes pour reproduire le problème, ou posez la question dans le chat communautaire.
Exemple : connecter Supabase¶
Supabase fournit une base de données PostgreSQL hébergée avec une API GraphQL intégrée.
- Dans le tableau de bord Supabase, allez dans Settings → API et trouvez l'URL de votre projet
- Votre point d'accès GraphQL est :
https://VOTRE-PROJET.supabase.co/graphql/v1 - Dans la boîte de dialogue de source de données dans Silex :
- URL :
https://VOTRE-PROJET.supabase.co/graphql/v1 - Type de backend : Supabase
- Ajouter un en-tête : nom
apikey, valeur : votre clé anon (publique) depuis les paramètres API de Supabase - Ajouter un en-tête : nom
Authorization, valeur :Bearer VOTRE_CLE_ANON - Cliquez sur Tester la connexion — vous devriez voir les tables de votre base de données comme types GraphQL
Les tables de votre Supabase apparaissent comme des types. Les politiques de sécurité au niveau des lignes (RLS) contrôlent quelles données sont accessibles — assurez-vous que les données publiques ont les bonnes politiques RLS activées.
En savoir plus¶
- Comment fonctionne le CMS — comprendre la vue d'ensemble du flux de données
- Configuration WordPress — configurer WPGraphQL sur votre site WordPress
- Lier les données — utiliser la source de données connectée pour afficher du contenu
- Développeur : autres API GraphQL — configuration détaillée pour Strapi, Supabase et d'autres backends
Quiz¶
Q1 : Le point d'accès GraphQL de votre site WordPress est à https://monblog.com/graphql. Où le saisissez-vous dans Silex ?
- A) Dans le champ URL de la boîte de dialogue de source de données
- B) Dans les paramètres du site
- C) Il est détecté automatiquement
Réponse
A) Dans le champ URL de la boîte de dialogue de source de données — Vous collez l'URL complète du point d'accès GraphQL dans les paramètres de source de données pour que Silex sache d'où récupérer les données.
Q2 : Vous configurez une source de données pour une API WordPress privée qui nécessite une authentification. Qu'ajoutez-vous à la boîte de dialogue ?
- A) Le nom d'utilisateur et le mot de passe dans l'URL
- B) Un en-tête Authorization avec le jeton API
- C) Le jeton JWT dans le champ libellé
Réponse
B) Un en-tête Authorization avec le jeton API — Les en-têtes d'authentification sont séparés de l'URL. Ajoutez un en-tête (généralement nommé "Authorization") avec la valeur du jeton que votre fournisseur d'API vous donne.
Q3 : Vous avez sélectionné "WordPress" comme type de backend. Qu'est-ce que cela fait ?
- A) Cela installe WordPress sur votre serveur
- B) Cela se connecte spécifiquement à WordPress et ne fonctionnera pas avec d'autres plateformes
- C) Cela optimise l'interface de l'éditeur pour la structure de données WordPress
Réponse
C) Cela optimise l'interface de l'éditeur pour la structure de données WordPress — Choisir un type de backend aide Silex à comprendre la disposition des données et à fournir des valeurs par défaut intelligentes, mais vous pouvez utiliser n'importe quelle API GraphQL avec l'option "Generic" si votre plateforme n'est pas listée.
Q4 : Le test de connexion échoue avec "CORS error". Qu'est-ce que cela signifie ?
- A) Votre URL est incorrecte
- B) Votre fournisseur d'API n'a pas configuré CORS pour autoriser les requêtes depuis Silex
- C) Vous n'avez pas les en-têtes d'authentification
Réponse
B) Votre fournisseur d'API n'a pas configuré CORS pour autoriser les requêtes depuis Silex — CORS (Cross-Origin Resource Sharing) est une fonctionnalité de sécurité du navigateur. Votre fournisseur d'API doit explicitement autoriser les requêtes depuis le domaine de Silex.