Skip to content
Graffle is a work in progress. Learn more.

Presets

Presets are pre-configured Graffle clients with specific combinations of extensions. They provide convenient starting points for different use cases, from maximum control to batteries-included convenience.

Overview

Graffle offers three presets, each building upon the previous one:

PresetExtensionsUse Case
BareNoneMaximum control, bring your own extensions
MinimalTransportHttpHTTP-only GraphQL client
BasicTransportHttp, TransportMemory, DocumentBuilderFull-featured client (recommended)

Choosing a Preset

Start with Basic - Most users should start with the basic preset. It includes everything you need for typical GraphQL development including HTTP transport, in-memory schema support, and the type-safe document builder.

Use Minimal - Choose minimal if you only need HTTP transport and want to add other extensions selectively.

Use Bare - Choose bare for maximum control when you want to explicitly manage every extension, or when building custom presets for specific environments (e.g., edge functions, embedded systems).

Bare

The bare preset provides a completely empty Graffle client with no extensions. Use this when you need maximum control or want to build a custom configuration from scratch.

ts
import { GraffleBare } from 'graffle/presets/bare'

const graffle = GraffleBare
  .create()
  .use()
  /* your extensions */
  .transport() /* your transport */

What's included:

  • Core Graffle client functionality
  • Extension system

What's NOT included:

  • No transport layer (HTTP, memory, etc.)
  • No document builder
  • No convenience extensions

When to use:

  • Building custom presets for specific environments
  • Edge computing with size constraints
  • When you need explicit control over every capability

Minimal

The minimal preset adds HTTP transport support, providing everything needed for querying GraphQL APIs over HTTP.

ts
import { GraffleMinimal } from 'graffle/presets/minimal'

const graffle = GraffleMinimal
  .create()
  .transport({ url: 'https://api.example.com/graphql' })

What's included:

What's NOT included:

  • In-memory schema support
  • Document builder
  • Other convenience extensions

When to use:

  • HTTP-only GraphQL clients
  • When you want to add document builder or other extensions selectively
  • Lightweight browser bundles

Basic

The basic preset is the recommended starting point for most projects. It includes HTTP transport, in-memory schema support, and the type-safe document builder.

ts
import { GraffleBasic } from 'graffle/presets/basic'

const graffle = GraffleBasic
  .create()
  .transport({ url: 'https://api.example.com/graphql' })

What's included:

When to use:

  • Most production applications
  • Development and testing (memory transport)
  • When you want type-safe document building
  • Full-featured GraphQL client needs

Extending Presets

All presets support the same extension API. Add additional extensions using .use():

ts
import { OpenTelemetry } from 'graffle/extensions/opentelemetry'
import { SchemaErrors } from 'graffle/extensions/schema-errors'
import { Upload } from 'graffle/extensions/upload'
import { GraffleBasic } from 'graffle/presets/basic'

const graffle = GraffleBasic
  .create()
  .use(SchemaErrors())
  .use(Upload)
  .use(OpenTelemetry())
  .transport({ url: 'https://api.example.com/graphql' })

See the Extensions documentation for all available extensions.

Migration Between Presets

Moving between presets is straightforward:

ts
// From Bare to Minimal - add HTTP transport
- import { GraffleBare } from 'graffle/presets/bare'
+ import { GraffleMinimal } from 'graffle/presets/minimal'

- const graffle = GraffleBare.create().use(TransportHttp)
+ const graffle = GraffleMinimal.create()

// From Minimal to Basic - add memory transport and document builder
- import { GraffleMinimal } from 'graffle/presets/minimal'
+ import { GraffleBasic } from 'graffle/presets/basic'

- const graffle = GraffleMinimal.create().use(TransportMemory).use(DocumentBuilder)
+ const graffle = GraffleBasic.create()

Type Safety

All presets maintain full type safety, with TypeScript tracking exactly which extensions are loaded and which methods are available:

ts
import { GraffleBare } from 'graffle/presets/bare'
import { GraffleBasic } from 'graffle/presets/basic'

const bare = GraffleBare.create()
bare.query.foo() // ❌ Error: No document builder extension

const basic = GraffleBasic.create()
basic.query.foo() // ✅ Works: Document builder included

Released under the MIT License.