Introduction

Why Graffle?

Graffle is a GraphQL client for JavaScript that works in all major run-times (browsers, Node, Deno, Bun, Cloudflare Workers, ...). It's goal is to be a fantastic general purpose way to execute GraphQL documents in scripts or backend logic. It may work work well for your frontend logic too but Graffle does not specialize there unlike other tools such as RelayJS and Urql.

Initially Graffle is an easy way to send GraphQL requests over HTTP or in-memory. Extensions bring additional power like OTEL or file upload support. You work with GraphQL's native document syntax. This description so far paints Graffle as a more flexible and stable version of its previous version known as graphql-request. However, its value proposition doesn't end there. You can opt into using its generated client bringing benefits like:

1. A TypeScript first interface for creating and sending requests including method names that reflect the schema.
2. Type-safe request inputs (selection set, directives, etc.).
3. Type-safe request outputs (results) inferred from the input.
4. Automatic encoding and decoding of custom scalars.
5. Type utilities to create TypeScript types based on types in the GraphQL schema.
6. Runtime utilities to create reusable selection sets.

Take Graffle for a spin, let us know what you think. We hope you have as much fun working with Graffle as we are building it. ❤️

About These Docs

Graffle's website documentation is primarily divided between these guides and examples. Detailed reference information is largely left to JSDoc and TypeScript types. However, thanks to Twoslash that information is also made available within the website docs.

Guides are built around domains rather than technical locality so for example many aspects of configuration are embedded into each one's respective area of concern like HTTP Transport or Output. Throughout, guides reference Examples in context helping you jump between theory and practice. As well, know that all examples are automatically tested in Graffle's continuous integration so you can be confident in their functionality.

Generated Client Icon ⩕

This icon is used throughout the guides to denote that the content only applies to the generated client.