Génération de schéma GraphQL — Intégration WPGraphQL | Field Forge - Champs personnalisés, conçus pour la vitesse
Télécharger Se connecter

Génération de schéma GraphQL — Intégration WPGraphQL

Le problème WPGraphQL + champs personnalisés

WPGraphQL est la couche API GraphQL pour WordPress. Elle expose les articles, les pages, les taxonomies et les utilisateurs sous forme de schéma GraphQL qu’un frontend JavaScript peut interroger. C’est excellent — sauf pour un grand manque : elle ne connaît pas les champs personnalisés.

Si vous souhaitez interroger des champs personnalisés via WPGraphQL, vous avez traditionnellement trois options :

  1. WPGraphQL pour ACF — un plugin séparé qui lit les définitions de champs ACF et les expose. Fonctionne pour les utilisateurs d’ACF et de SCF, mais nécessite une configuration manuelle pour des groupes de champs complexes.
  2. Types WPGraphQL personnalisés — écrire du code PHP pour enregistrer manuellement chaque type de champ personnalisé avec WPGraphQL. Extrêmement fastidieux.
  3. Utiliser l’API REST à la place — l’API REST de WordPress expose des champs personnalisés, mais elle est moins efficace que GraphQL pour des requêtes complexes.

L’approche de Field Forge : enregistrer automatiquement les types WPGraphQL dès que les deux plugins sont actifs. Aucun code. Aucun enregistrement manuel. Vos champs personnalisés deviennent immédiatement interrogeables via GraphQL.


Comment ça fonctionne

Étape 1 : Installer Field Forge et WPGraphQL

Les deux plugins doivent être actifs. WPGraphQL est la couche API GraphQL ; Field Forge fournit les définitions de types et les résolveurs pour les champs personnalisés.

Étape 2 : Field Forge détecte WPGraphQL lors de l’activation

Lorsque Field Forge est activé (ou WPGraphQL est activé après Field Forge), Field Forge scanne vos groupes de champs et enregistre automatiquement :

  • Types GraphQL pour chaque groupe de champs (par exemple, HeroSectionFields, TeamMemberFields)
  • Types GraphQL pour les répéteurs imbriqués, les groupes et les mises en page de contenu flexible
  • Types d’union pour le contenu flexible avec plusieurs mises en page
  • Résolveurs qui récupèrent les valeurs de champ à partir du stockage de table personnalisé de Field Forge

Étape 3 : Interroger via WPGraphQL

Vos champs personnalisés sont immédiatement interrogeables :

graphql query GetPage { page(id: "home", idType: SLUG) { title fieldforge { heroSection { title subtitle backgroundImage { id sourceUrl altText mediaDetails { width height } } ctaButton { text url openInNewTab } } } } }

La clé fieldforge est ajoutée à chaque type de post interrogeable, exposant les groupes de champs personnalisés assignés à ce post.


SDL GraphQL téléchargeable

Field Forge vous permet également de télécharger le langage de définition de schéma GraphQL (SDL) pur pour vos groupes de champs. Cela est utile pour :

  • Génération de code — des outils comme GraphQL Code Generator peuvent lire le SDL et produire des types TypeScript
  • Documentation — publier le schéma pour votre équipe ou vos consommateurs d’API
  • Tests — utiliser le SDL pour simuler des réponses dans les tests
  • Outils — des IDE GraphQL conscients du schéma comme GraphQL Playground peuvent compléter automatiquement les requêtes

Cliquez sur Télécharger GraphQL SDL dans l’administration de Field Forge pour obtenir un fichier .graphql :

“`graphql type HeroSectionFields { title: String subtitle: String backgroundImage: MediaItem ctaButton: CtaButtonGroup }

type CtaButtonGroup { text: String url: String openInNewTab: Boolean }

type TeamMemberFields { name: String photo: MediaItem bio: String skills: [SkillSubField] }

type SkillSubField { skillName: String proficiency: Int } “`


Types imbriqués et complexes

GraphQL gère naturellement les types imbriqués. Field Forge génère :

Champs répéteurs → types de tableau

“`graphql type TeamPage { teamMembers: [TeamMemberRow] }

type TeamMemberRow { name: String photo: MediaItem bio: String } “`

Contenu flexible → types d’union

“`graphql type LandingPage { pageSections: [PageSectionLayout] }

union PageSectionLayout = HeroLayout | FeaturesLayout | CTALayout

type HeroLayout { title: String subtitle: String backgroundImage: MediaItem }

type FeaturesLayout { sectionTitle: String features: [FeatureItem] }

type CTALayout { headline: String button: ButtonGroup } “`

Interroger des types d’union dans GraphQL nécessite des fragments en ligne :

graphql query GetLandingPage { page(id: "home", idType: SLUG) { fieldforge { pageSections { __typename ... on HeroLayout { title subtitle backgroundImage { sourceUrl } } ... on FeaturesLayout { sectionTitle features { title description } } ... on CTALayout { headline button { text url } } } } } }

C’est l’idiome standard de GraphQL. Le résultat est un tableau entièrement typé où chaque élément a la bonne forme pour sa mise en page.


Champs de relation → types de connexion

Les champs relationnels (objet post, relation, utilisateur, taxonomie) produisent des types de connexion GraphQL appropriés :

graphql type ProductFields { relatedProducts: [Post] # Type Post résolu automatiquement au type Post de WPGraphQL author: User # Type User résolu automatiquement category: [Category] # Termes de taxonomie résolus automatiquement }

Les types Post, User, et Category sont les types intégrés de WPGraphQL. Field Forge s’intègre avec eux nativement — un champ de post lié se résout en l’objet Post complet de WPGraphQL avec tous ses champs interrogeables.

graphql query GetProduct { post(id: "product-a") { fieldforge { productDetails { relatedProducts { title slug featuredImage { node { sourceUrl } } } } } } }


Fonctionne avec GraphQL Code Generator

Si vous utilisez GraphQL Code Generator dans votre projet frontend, le schéma GraphQL auto-enregistré de Field Forge fonctionne dès la sortie de la boîte. Configurez codegen.yml pour introspecter votre point de terminaison GraphQL WordPress :

yaml schema: https://wp.example.com/graphql documents: './src/**/*.graphql' generates: ./src/gql/: preset: client plugins: []

Exécutez graphql-codegen et vous obtiendrez des hooks de requête GraphQL entièrement typés pour votre frontend, avec les types de Field Forge intégrés de manière transparente.


Field Forge vs WPGraphQL pour ACF

WPGraphQL pour ACF est un plugin séparé développé par l’équipe WPGraphQL qui expose les groupes de champs ACF (et SCF) à GraphQL. Cela fonctionne, mais c’est un plugin séparé à gérer et parfois il prend du retard par rapport aux mises à jour d’ACF.

Field Forge regroupe l’intégration GraphQL en tant que fonctionnalité principale. Vous n’installez pas un plugin séparé. L’intégration est maintenue dans le cadre du cycle de publication de Field Forge. Chaque type de champ est pris en charge nativement.

Pour les sites utilisant ACF + WPGraphQL pour ACF, passer à Field Forge signifie un plugin de moins et une meilleure intégration.


Performance

Les requêtes GraphQL dans une configuration Field Forge + WPGraphQL bénéficient du stockage de table personnalisé et de l’intégration du cache d’objet de Field Forge. Une requête complexe récupérant de nombreux articles avec plusieurs groupes de champs s’exécute en quelques requêtes SQL, pas des centaines que générerait une approche naïve basée sur wp_postmeta.


Prêt pour les champs personnalisés GraphQL ?

Obtenez Field Forge — à partir de 35 $/an →

La génération GraphQL et l’intégration WPGraphQL sont présentes dans chaque plan payant.

Assistant IA Forge En ligne

Bonjour ! Je suis l'assistant IA Field Forge. Posez-moi n'importe quelle question sur le plugin — configuration, fonctionnalités, dépannage ou développement.

À l'instant
Propulsé par Forge IA · Parcourir la documentation