Field Forge + WPGraphQL — WordPress Headless | Field Forge - Campos personalizados, diseñados para la velocidad
Descargar Iniciar sesión

Field Forge + WPGraphQL — WordPress Headless

Qué es WPGraphQL

WPGraphQL es la capa de API GraphQL para WordPress. Expone publicaciones, páginas, taxonomías y usuarios de WordPress como un esquema GraphQL que los frontends de JavaScript (Next.js, Astro, Nuxt, SvelteKit, etc.) pueden consultar de manera eficiente. Es la forma estándar de construir WordPress headless con un frontend de JavaScript.

La brecha de WPGraphQL siempre ha sido los campos personalizados. No conoce ACF, Meta Box, CMB2, ni los campos de ningún otro plugin; necesitas plugins adicionales como WPGraphQL for ACF para cerrar la brecha.

Field Forge llena esta brecha de manera nativa. Cuando Field Forge y WPGraphQL están activos, los campos personalizados de Field Forge aparecen automáticamente en el esquema GraphQL.


Cómo funciona la auto-registro

En la activación del plugin

Cuando Field Forge se activa (o WPGraphQL se activa después de Field Forge), Field Forge:

  1. Detecta WPGraphQL a través de function_exists('register_graphql_object_type')
  2. Lee todos los grupos de campos de la base de datos
  3. Genera tipos GraphQL para cada grupo de campos — con tipos anidados para repetidores, grupos y contenido flexible
  4. Registra tipos con WPGraphQL a través de la API oficial de registro de tipos de WPGraphQL
  5. Agrega un campo fieldforge a cada tipo de publicación consultable
  6. Registra resolutores que obtienen valores de campo del almacenamiento de tabla personalizada de Field Forge

Todo esto sucede automáticamente, en segundo plano, durante la activación del plugin.

En cambios de grupos de campos

Cuando agregas, editas o eliminas un grupo de campos en el constructor visual de Field Forge, el esquema GraphQL se actualiza automáticamente. La caché del esquema de WPGraphQL se vacía y Field Forge vuelve a registrar los tipos actualizados en la siguiente solicitud.

No necesitas regenerar nada manualmente.


Ejemplo de consulta GraphQL

Con Field Forge y WPGraphQL ambos activos, puedes consultar campos personalizados así:

graphql query GetHomepage { page(id: "home", idType: URI) { title fieldforge { heroSection { title subtitle backgroundImage { sourceUrl altText mediaDetails { width height } } ctaButton { text url openInNewTab } } featuresSection { sectionTitle features { icon title description } } } } }

La clave fieldforge expone todos los grupos de campos asignados a la página a través de reglas de ubicación. Cada grupo de campos es un objeto tipado con sus propios campos.


Tipos anidados

Los campos repetidores, grupos y contenido flexible producen tipos GraphQL anidados adecuados:

Repetidor → tipo array

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

type TeamMemberRow { name: String photo: MediaItem bio: String socialLinks: [SocialLinkRow] # Repetidor anidado } “`

Contenido flexible → tipo unión

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

union PageSectionLayout = HeroLayout | FeaturesLayout | CTALayout “`

Consulta tipos de unión con fragmentos en línea:

graphql query GetLandingPage { page(id: "landing", idType: URI) { fieldforge { pageSections { __typename ... on HeroLayout { title backgroundImage { sourceUrl } } ... on FeaturesLayout { sectionTitle features { title description } } } } } }


Campos relacionales

Los campos relacionales (Post Object, Relationship, User, Taxonomy) se resuelven a los tipos nativos de WPGraphQL:

graphql type ProductFieldforge { relatedProducts: [Post] # Tipo Post de WPGraphQL author: User # Tipo User de WPGraphQL categories: [Category] # Tipo Category de WPGraphQL }

Esto significa que puedes encadenar consultas a través de relaciones:

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


Páginas de opciones en GraphQL

Los valores de los campos de la página de opciones se exponen como tipos GraphQL de nivel raíz:

“`graphql type FieldforgeOptions { siteSettings: SiteSettingsFields headerSettings: HeaderSettingsFields footerSettings: FooterSettingsFields }

type Query { fieldforgeOptions: FieldforgeOptions } “`

Consúltalos sin un contexto de publicación específico:

graphql query GetGlobalSettings { fieldforgeOptions { siteSettings { companyName phone email } footerSettings { copyright socialLinks { platform url } } } }


Combinando con la generación de TypeScript

Field Forge también genera definiciones de TypeScript para los mismos grupos de campos. Usa ambos:

  1. GraphQL para la obtención de datos en tiempo de ejecución con consultas eficientes
  2. TypeScript para la seguridad de tipos en tiempo de compilación en tu código frontend

Los dos alimentan diferentes pipelines pero representan los mismos datos subyacentes del grupo de campos. Actualiza un grupo de campos en Field Forge y tanto el esquema GraphQL como las definiciones de TypeScript se actualizan juntos.

Para equipos que usan GraphQL Code Generator, puedes introspectar el esquema de WPGraphQL aumentado por Field Forge y auto-generar hooks de consulta tipados:

“`yaml

codegen.yml

schema: https://wp.example.com/graphql documents: ‘./src/**/*.graphql’ generates: ./src/gql/: preset: client plugins: [] “`

Ejecuta graphql-codegen y tu frontend tendrá consultas GraphQL completamente tipadas para todos los campos de Field Forge.


vs WPGraphQL for ACF

WPGraphQL for ACF es un plugin separado del equipo de WPGraphQL que integra grupos de campos ACF en el esquema GraphQL. Funciona tanto con ACF como con SCF (ya que SCF es un fork de ACF).

Diferencias respecto a la integración nativa de Field Forge:

Field Forge + WPGraphQL WPGraphQL for ACF
Instalación Auto-registra en la activación de Field Forge Plugin separado para instalar y configurar
Mantenimiento Parte del ciclo de lanzamiento de Field Forge Ciclo de lanzamiento independiente
Fuente de campos personalizados Field Forge ACF o SCF
Mapeo de tipos Específico de Field Forge Específico de ACF
Rendimiento Carga por lotes integrada con la tabla personalizada de Field Forge Depende del almacenamiento wp_postmeta

Si estás en ACF/SCF y necesitas GraphQL, WPGraphQL for ACF es el camino. Si estás considerando modernizar la capa de campos personalizados, Field Forge + WPGraphQL reemplaza ambos plugins con una experiencia más integrada.


¿Listo para campos personalizados GraphQL?

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

La integración con WPGraphQL está incluida en cada plan de pago. Se auto-registra en la activación, cero configuración.

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