Generación de Esquemas GraphQL — Integración de WPGraphQL | Field Forge - Campos personalizados, diseñados para la velocidad
Descargar Iniciar sesión

Generación de Esquemas GraphQL — Integración de WPGraphQL

El problema de WPGraphQL + campos personalizados

WPGraphQL es la capa de API GraphQL para WordPress. Expone publicaciones, páginas, taxonomías y usuarios como un esquema GraphQL que un frontend de JavaScript puede consultar. Es excelente, excepto por una gran carencia: no conoce los campos personalizados.

Si deseas consultar campos personalizados a través de WPGraphQL, tradicionalmente tienes tres opciones:

  1. WPGraphQL para ACF — un plugin separado que lee las definiciones de campos de ACF y las expone. Funciona para usuarios de ACF y SCF, pero requiere configuración manual para grupos de campos complejos.
  2. Tipos personalizados de WPGraphQL — escribir código PHP para registrar manualmente cada tipo de campo personalizado con WPGraphQL. Extremadamente tedioso.
  3. Usar la REST API en su lugar — la REST API de WordPress sí expone campos personalizados, pero es menos eficiente que GraphQL para consultas complejas.

El enfoque de Field Forge: registrar automáticamente los tipos de WPGraphQL en el momento en que ambos plugins están activos. Sin código. Sin registro manual. Tus campos personalizados se vuelven consultables a través de GraphQL de inmediato.


Cómo funciona

Paso 1: Instalar Field Forge y WPGraphQL

Ambos plugins deben estar activos. WPGraphQL es la capa de API GraphQL; Field Forge proporciona las definiciones de tipo y resolutores para campos personalizados.

Paso 2: Field Forge detecta WPGraphQL al activarse

Cuando Field Forge se activa (o WPGraphQL se activa después de Field Forge), Field Forge escanea tus grupos de campos y registra automáticamente:

  • Tipos GraphQL para cada grupo de campos (por ejemplo, HeroSectionFields, TeamMemberFields)
  • Tipos GraphQL para repetidores anidados, grupos y diseños de contenido flexible
  • Tipos de unión para contenido flexible con múltiples diseños
  • Resolutores que obtienen valores de campo del almacenamiento de tabla personalizada de Field Forge

Paso 3: Consultar a través de WPGraphQL

Tus campos personalizados son inmediatamente consultables:

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 clave fieldforge se añade a cada tipo de publicación consultable, exponiendo los grupos de campos personalizados asignados a esa publicación.


SDL GraphQL descargable

Field Forge también te permite descargar el puro Lenguaje de Definición de Esquema GraphQL (SDL) para tus grupos de campos. Esto es útil para:

  • Generación de código — herramientas como GraphQL Code Generator pueden leer el SDL y producir tipos de TypeScript
  • Documentación — publicar el esquema para tu equipo o consumidores de API
  • Pruebas — usar el SDL para simular respuestas en pruebas
  • Herramientas — IDEs de GraphQL conscientes del esquema como GraphQL Playground pueden autocompletar consultas

Haz clic en Descargar SDL GraphQL en el administrador de Field Forge para obtener un archivo .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 } “`


Tipos anidados y complejos

GraphQL maneja tipos anidados de forma natural. Field Forge genera:

Campos repetidores → tipos de array

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

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

Contenido flexible → tipos de unión

“`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 } “`

Consultar tipos de unión en GraphQL requiere fragmentos en línea:

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 } } } } } }

Este es un estándar de GraphQL. El resultado es un array completamente tipado donde cada elemento tiene la forma correcta para su diseño.


Campos de relación → tipos de conexión

Los campos relacionales (objeto de publicación, relación, usuario, taxonomía) producen tipos de conexión GraphQL adecuados:

graphql type ProductFields { relatedProducts: [Post] # Tipo de publicación resuelto automáticamente al tipo de publicación de WPGraphQL author: User # Tipo de usuario resuelto automáticamente category: [Category] # Términos de taxonomía resueltos automáticamente }

Los tipos Post, User y Category son tipos integrados de WPGraphQL. Field Forge se integra con ellos de forma nativa: un campo de publicación relacionada se resuelve al objeto Post completo de WPGraphQL con todos sus campos consultables.

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


Funciona con GraphQL Code Generator

Si usas GraphQL Code Generator en tu proyecto frontend, el esquema GraphQL auto-registrado de Field Forge funciona sin problemas. Configura codegen.yml para introspectar tu endpoint GraphQL de WordPress:

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

Ejecuta graphql-codegen y obtendrás ganchos de consulta GraphQL completamente tipados para tu frontend, con tipos de Field Forge integrados sin problemas.


Field Forge vs WPGraphQL para ACF

WPGraphQL para ACF es un plugin separado desarrollado por el equipo de WPGraphQL que expone grupos de campos de ACF (y SCF) a GraphQL. Funciona, pero es un plugin separado para gestionar y a veces se queda atrás en las actualizaciones de ACF.

Field Forge agrupa la integración de GraphQL como una característica principal. No necesitas instalar un plugin separado. La integración se mantiene como parte del ciclo de lanzamiento de Field Forge. Cada tipo de campo es compatible de forma nativa.

Para sitios que utilizan ACF + WPGraphQL para ACF, cambiar a Field Forge significa un plugin menos y una mejor integración.


Rendimiento

Las consultas GraphQL en una configuración de Field Forge + WPGraphQL se benefician del almacenamiento de tabla personalizada y de la integración de caché de objetos de Field Forge. Una consulta compleja que obtiene muchas publicaciones con múltiples grupos de campos se ejecuta en unas pocas consultas SQL, no en las cientos que generaría un enfoque ingenuo basado en wp_postmeta.


¿Listo para los campos personalizados de GraphQL?

Obtén Field Forge — desde $35/año →

La generación de GraphQL y la integración de WPGraphQL están en cada plan de pago.

Asistente de IA de Forge En línea

¡Hola! Soy el asistente de IA de Field Forge. Pregúntame lo que quieras sobre el plugin — configuración, funciones, resolución de problemas o desarrollo.

Ahora mismo
Con la tecnología de Forge AI · Explorar documentación