Document Builder

The document builder extension allows you to build GraphQL documents with a TypeScript native syntax (as opposed to using GraphQL native syntax). And thanks to Graffle's powerful types all inputs (GraphQL arguments) and outputs (execution results) are type safe ✨.

By not hardcoding this feature into core, we keep Graffle lean and bundle sizes smaller for users that are not leveraging it.

Getting Started

import { Graffle } from 'graffle'
import { DocumentBuilder } from 'graffle/extensions/document-builder'

const graffle = Graffle.create().use(DocumentBuilder)

In addition to using this extension programmatically you must also run the generator. Refer to its docs for details about it. Here's a basic example of usage:

pnpm graffle --schema ./my-schema.graphql

Generated Document Builder

The generator also produces a standalone document builder that works without a client instance. This is useful for generating typed GraphQL documents to use with other GraphQL clients. See the Document Builder guide for details.

Selection Set Syntax

For a comprehensive guide to Graffle's selection set syntax including:

• Arguments and nested arguments
• Variables and type inference
• Aliases
• Directives (@skip, @include, field groups)
• Inline fragments (unions and interfaces)
• Enums
• Mutations
• Custom scalars

See the Document Builder Selection Set Syntax guide.

Methods

Document

Examples -> Document

The document method is used to create whole GraphQL documents.

There are other more targeted ways of sending GraphQL requests when you don't need to author the entire document.

• If you only need to work with a single operation type then use $batch.
• If you only need to work with a single root field then use root field methods.

Example

Batch

Root Fields

Select