Field Forge + WPGraphQL — Безголовий WordPress | Field Forge - Кастомні поля, створені для швидкості
Завантажити Увійти

Field Forge + WPGraphQL — Безголовий WordPress

Що таке WPGraphQL

WPGraphQL — це шар API GraphQL для WordPress. Він відкриває публікації, сторінки, таксономії та користувачів WordPress як схему GraphQL, яку JavaScript фронтенди (Next.js, Astro, Nuxt, SvelteKit тощо) можуть запитувати ефективно. Це стандартний спосіб створення безголового WordPress з JavaScript фронтендом.

Недоліком WPGraphQL завжди були кастомні поля. Він не знає про ACF, Meta Box, CMB2 або будь-які інші поля плагінів — вам потрібні додаткові плагіни, такі як WPGraphQL для ACF, щоб заповнити цю прогалину.

Field Forge заповнює цю прогалину нативно. Коли Field Forge та WPGraphQL обидва активні, кастомні поля Field Forge автоматично з’являються в схемі GraphQL.


Як працює авто-регистрация

При активації плагіна

Коли Field Forge активується (або WPGraphQL активується після Field Forge), Field Forge:

  1. Визначає WPGraphQL через function_exists('register_graphql_object_type')
  2. Читає всі групи полів з бази даних
  3. Генерує типи GraphQL для кожної групи полів — з вкладеними типами для повторювачів, груп та гнучкого контенту
  4. Реєструє типи з WPGraphQL через офіційний API реєстрації типів WPGraphQL
  5. Додає поле fieldforge до кожного запитуваного типу публікації
  6. Реєструє резолвери, які отримують значення полів з кастомного сховища таблиці Field Forge

Усе це відбувається автоматично, у фоновому режимі, під час активації плагіна.

При змінах групи полів

Коли ви додаєте, редагуєте або видаляєте групу полів у візуальному конструкторі Field Forge, схема GraphQL оновлюється автоматично. Кеш схеми WPGraphQL очищається, і Field Forge повторно реєструє оновлені типи при наступному запиті.

Вам не потрібно вручну регенерувати нічого.


Приклад запиту GraphQL

З активними Field Forge та WPGraphQL ви можете запитувати кастомні поля таким чином:

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

Ключ fieldforge відкриває всі групи полів, призначені для сторінки через правила розташування. Кожна група полів є типізованим об’єктом зі своїми полями.


Вкладені типи

Поля повторювачів, групи та гнучкий контент усі створюють правильні вкладені типи GraphQL:

Повторювач → масив типів

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

type TeamMemberRow { name: String photo: MediaItem bio: String socialLinks: [SocialLinkRow] # Вкладений повторювач } “`

Гнучкий контент → об’єднаний тип

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

union PageSectionLayout = HeroLayout | FeaturesLayout | CTALayout “`

Запитуйте об’єднані типи з вбудованими фрагментами:

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


Реляційні поля

Реляційні поля (Post Object, Relationship, User, Taxonomy) вирішуються в рідні типи WPGraphQL:

graphql type ProductFieldforge { relatedProducts: [Post] # Тип поста WPGraphQL author: User # Тип користувача WPGraphQL categories: [Category] # Тип категорії WPGraphQL }

Це означає, що ви можете з’єднувати запити через відносини:

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


Сторінки параметрів у GraphQL

Значення полів сторінки параметрів відкриваються як кореневі типи GraphQL:

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

type Query { fieldforgeOptions: FieldforgeOptions } “`

Запитуйте їх без конкретного контексту поста:

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


Комбінування з генерацією TypeScript

Field Forge також генерує визначення TypeScript для тих самих груп полів. Використовуйте обидва:

  1. GraphQL для отримання даних у реальному часі з ефективними запитами
  2. TypeScript для безпеки типів під час компіляції у вашому фронтенд-коді

Обидва живлять різні конвеєри, але представляють ті ж самі дані групи полів. Оновіть групу полів у Field Forge, і схема GraphQL та визначення TypeScript оновлюються разом.

Для команд, які використовують GraphQL Code Generator, ви можете інспектувати схему WPGraphQL, доповнену Field Forge, та автоматично генерувати типізовані хуки запитів:

“`yaml

codegen.yml

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

Запустіть graphql-codegen, і ваш фронтенд матиме повністю типізовані запити GraphQL для всіх полів Field Forge.


проти WPGraphQL для ACF

WPGraphQL для ACF — це окремий плагін від команди WPGraphQL, який з’єднує групи полів ACF у схему GraphQL. Він працює як з ACF, так і з SCF (оскільки SCF є форком ACF).

Відмінності від нативної інтеграції Field Forge:

Field Forge + WPGraphQL WPGraphQL для ACF
Встановлення Авто-регистрация при активації Field Forge Окремий плагін для встановлення та налаштування
Обслуговування Частина циклу випуску Field Forge Незалежний цикл випуску
Джерело кастомних полів Field Forge ACF або SCF
Мапування типів Специфічне для Field Forge Специфічне для ACF
Продуктивність Вбудоване пакетне завантаження з кастомною таблицею Field Forge Залежить від зберігання wp_postmeta

Якщо ви використовуєте ACF/SCF і вам потрібен GraphQL, WPGraphQL для ACF — це шлях. Якщо ви розглядаєте модернізацію шару кастомних полів, Field Forge + WPGraphQL замінює обидва плагіни більш інтегрованим досвідом.


Готові до кастомних полів GraphQL?

Отримайте Field Forge — від $35/рік →

Інтеграція WPGraphQL включена в кожен платний план. Авто-регистрация при активації, нульове налаштування.

Асистент ШІ Forge Онлайн

Привіт! Я асистент ШІ Field Forge. Запитайте мене про будь-що щодо плагіна — налаштування, можливості, усунення несправностей чи розробку.

Щойно
Працює на Forge AI · Переглянути документацію