Standard Graphql
This example shows how to configure output to approximate the traditional GraphQL ExecutionResult type.
ts
// Our website uses Vitepress+Twoslash. Twoslash does not discover the generated Graffle modules.
// Perhaps we can configure Twoslash to include them. Until we figure that out, we have to
// explicitly import them like this.
import './graffle/modules/global.js'
// ---cut---
import { Graffle, Preset } from 'graffle'
const graffle = Graffle
.create({ output: Preset.traditionalGraphqlOutput })
.transport({ url: `http://localhost:3000/graphql` })
// This example demonstrates that invalid GraphQL documents are caught statically at compile-time.
// The field 'query' doesn't exist on the Query type - this error is caught before runtime.
// @ts-expect-error - intentionally invalid document: field 'query' doesn't exist on Query type
const result = await graffle.gql(`{ query { thisWillError } }`).$send()
console.log(result)Outputs
txt
{
errors: [
{
message: 'Cannot query field "query" on type "Query".',
locations: [ { line: 1, column: 3 } ],
extensions: { code: 'GRAPHQL_VALIDATION_FAILED' }
}
],
response: Response {
status: 400,
statusText: 'Bad Request',
headers: Headers {
'content-type': 'application/graphql-response+json; charset=utf-8',
'content-length': '160',
date: 'Sat, 18 Oct 2025 19:01:48 GMT',
connection: 'keep-alive',
'keep-alive': 'timeout=5'
},
body: ReadableStream { locked: true, state: 'closed', supportsBYOB: true },
bodyUsed: true,
ok: false,
redirected: false,
type: 'basic',
url: 'http://localhost:3000/graphql'
}
}