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 Settings (l'icône d'engrenage dans la barre de gauche, ou
Alt+S) - Ouvrez l'onglet CMS
- Cliquez sur Add Your First Data Source, ou sur le bouton + à côté de Data Sources
Une boîte de dialogue s'ouvre avec les champs pour la connexion API. Elle a deux étapes : la connexion (libellé, URL, en-têtes), puis le type de backend.
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(voir Configuration Supabase)
Consultez la documentation de votre fournisseur d'API pour l'URL exacte du point d'accès.
Cliquez sur Next une fois l'URL et les en-têtes remplis. Silex se connecte à l'API et lit son schéma, puis affiche la seconde étape.
Type de backend — Dans la seconde étape, 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, ouvrez HTTP Headers
- Cliquez sur Add a header
- 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 Next
- Silex récupère le schéma depuis votre API
- Si ça fonctionne, la seconde étape s'ouvre : choisissez le type de backend et cliquez sur Apply. La source de données affiche Connected dans l'onglet CMS
- En cas d'échec, un message d'erreur s'affiche sous le formulaire : vérifiez l'URL et les en-têtes
Plus tard, le bouton Test à côté d'une source de données vérifie à nouveau la connexion.
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 la source de données
- Changez l'URL, les en-têtes ou le libellé
- Cliquez sur Apply
Pour la supprimer, cliquez sur Delete à côté de la source de données, puis 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.
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
- Configuration Supabase — préparer un projet Supabase pour Silex
- Lier les données — utiliser la source de données connectée pour afficher du contenu
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 : Quand vous cliquez sur Next, Silex affiche "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.