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

GraphQL Feature Mapping

Aliases

Arguments

Custom Scalars

Directives

Enums

Inline Fragments

Field Groups

Type Conditions

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