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 les Paramètres du site (bouton Settings 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.
Puis cliquez sur Next (voir Tester la connexion).
Type de backend — Dans la seconde étape, sélectionnez la plateforme à laquelle vous vous connectez :
- GraphQL — n'importe quelle API GraphQL. C'est le choix par défaut
- WordPress — WordPress avec WPGraphQL
- GitLab — l'API GraphQL de GitLab
- Strapi
- Supabase
WordPress, GitLab, Strapi et Supabase sont marqués BETA dans la boîte de dialogue. Silex s'en sert pour choisir les types et les champs affichés par défaut. Si votre plateforme n'est pas dans la liste, gardez GraphQL.
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
- Un en-tête
Content-Typeest déjà là : gardez-le. 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, une erreur s'affiche sous le formulaire, par exemple « Error: Failed to fetch type names: Failed to fetch ». Le navigateur donne ce message quand l'URL est fausse, quand l'API est hors service, ou quand l'API n'accepte pas les requêtes venant de Silex (CORS, le fournisseur de l'API doit le configurer). Ouvrez la console du navigateur pour voir la cause exacte
Plus tard, le bouton Test à côté d'une source de données vérifie à nouveau la connexion.
Afficher ou masquer des types¶
Votre API propose des types : les sortes de données qu'elle contient (pour WordPress : Post, Page, Category, User…). Ils sont listés à la seconde étape de la boîte de dialogue. Pour y revenir plus tard, cliquez sur la source de données dans l'onglet CMS, puis sur Options.
Ouvrez Show / hide fields in the expressions : chaque type a une case à cocher et sa nature (object, scalar…). Décochez les types que vous ne voulez pas voir dans vos expressions. Search types... filtre la liste, Reset to Defaults la rétablit.
Pour voir les champs d'un type, utilisez le menu + quand vous liez des données.
Comprendre les types de champs¶
Dans le menu + d'une expression, chaque champ affiche son type entre parenthèses, par exemple title (string), comments (commentspage{}) ou data (post[]). Il y a trois sortes :
Scalar — une valeur unique (texte, nombre, date, vrai/faux).
Object ({}) — une valeur avec ses propres champs. Exemple : le champ "author" d'un article est un objet avec des champs comme name, email, bio.
List ([]) — plusieurs entrées d'un type. Exemple : "posts" est une liste d'objets article.
Lorsque vous liez des données, vous enchaînez ces types : author → name va de l'auteur d'un article (un objet) au nom de l'auteur. Les noms de champs dépendent de votre API.
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 :
- Dans l'onglet CMS, cliquez sur la source de données. La boîte de dialogue Edit Data Source s'ouvre
- Changez le libellé, l'URL ou les en-têtes. Options mène à la seconde étape : type de backend et types à afficher
- Cliquez sur Apply
Pour la supprimer, cliquez sur Delete à côté de la source de données, puis confirmez.
Dépannage¶
Pour une erreur au clic sur Next, voir Tester la connexion.
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 le champ Libellé
- 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 choisit les types et les champs WordPress affichés par défaut
Réponse
C) Cela choisit les types et les champs WordPress affichés par défaut — Silex se sert du type de backend pour choisir ce que vos expressions affichent par défaut. N'importe quelle API GraphQL fonctionne avec l'option "GraphQL" si votre plateforme n'est pas listée.
Q4 : Quand vous cliquez sur Next, Silex affiche « Failed to fetch ». L'URL est juste et l'API fonctionne. Quelle est la cause probable ?
- A) Votre URL est incorrecte
- B) Votre fournisseur d'API n'a pas configuré CORS pour autoriser les requêtes depuis Silex
- C) Le libellé est vide
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. La console du navigateur montre la cause exacte.