Block GraphQL Files

Naming#

A block named /blocks/sections/newsletter.tsx can have a single GraphQL query file named /blocks/sections/newsletter.graphql.

Due to a limitation with GraphQL Codegen, each .graphql file must contain one uniquely-named.

ACF fields attached to the block can be queried using the naming convention folderName_blockName, where the folder name and block name are automatically converted from dash-case to camelCase.

Execution#

Block queries are executed automatically by PHP code, so there is no need to call any functions to get the data, or handle any loading/error state. The result of the query is sent straight into the props of your block.

Querying ACF Fields#

GraphQL schemas for your blocks ACF Fields are automatically generated by PHP.

Consider this block type:

/**
 * Title: Single Project Tile
 * Description: Displays a single project as a large tile.
 * Category: common
 * Icon: book-alt
 * Keywords: post
 * Types: page, post
 * Mode: preview
 * Supports multiple: true
 */
import { defineBlock, EditableText, InnerBlocks } from "eddev/blocks"

export default defineBlock("project/single-project-tile", (props) => {
  return <div>...</div>
})

With the following ACF field configuration:

Example block

The ACF fields will be available under block.project_singleProjectTile

query SingleProjectTile {
  block {
    project_singleProjectTile {
      project {
        ... on Project {
          id
          title(format: RENDERED)
          projectFields {
            image {
              ...BasicImage
            }
          }
        }
      }
    }
  }
}