diff --git a/website/content/guides/20_methods/20_document.md b/website/content/guides/20_methods/20_document.md index be28e0b09..2633f5d9b 100644 --- a/website/content/guides/20_methods/20_document.md +++ b/website/content/guides/20_methods/20_document.md @@ -6,9 +6,9 @@ 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`](./40_batch.md). -- If you only need to work with a _single root field_ then use [root field methods]('./30_root-fields.md'). +- If you only need to work with a _single operation type_ then use [`$batch`](./batch.md). +- If you only need to work with a _single root field_ then use [root field methods](./root-fields.md). -## Example +### Example diff --git a/website/content/guides/20_methods/30_root-fields.md b/website/content/guides/20_methods/30_root-fields.md index 8b6f81b0a..9b95f8949 100644 --- a/website/content/guides/20_methods/30_root-fields.md +++ b/website/content/guides/20_methods/30_root-fields.md @@ -4,20 +4,31 @@ Every root field (aka. entrypoint) in the GraphQL schema is made available as a method on the generated client. Root fields are any field on the root types: `Query`, `Mutation`, and `Subscription`. -For example, if you have the following root field in your schema: +For example the [pokemon schema](../../examples/01_about/pokemon-schema.md) has this root field: ```graphql -type Query { - hello: String +type Mutation { + addPokemon(attack: Int, defense: Int, hp: Int, name: String!, type: PokemonType!): Pokemon + # ... } ``` -Then the generated client would have a `hello` method. - -```typescript -const result = await graffle.query.hello() +Then the generated client would include a `addPokemon` method. + +```ts twoslash +import { Pokemon } from './pokemon/__.js' +const pokemon = Pokemon.create() +// ---cut--- +const result = await pokemon.mutation.addPokemon({ + // ^^^^^^^^^^^^^^^^^^^ + $: { + name: 'Charmander', + type: 'fire', + }, + name: true, +}) ``` -## Example +### Example diff --git a/website/content/guides/20_methods/40_batch.md b/website/content/guides/20_methods/40_batch.md index 511b0e398..cbc0be14e 100644 --- a/website/content/guides/20_methods/40_batch.md +++ b/website/content/guides/20_methods/40_batch.md @@ -1 +1,39 @@ # Batch + + + +The `$batch` method appears on the client interface for every root type in the GraphQL schema. It is useful when you need to select multiple root fields in a single request. + +> [!Note] +> This is not the same thing as [request batching](https://the-guild.dev/graphql/yoga-server/docs/features/request-batching). +> That is a feature [Graffle does not yet support](https://github.com/jasonkuhrt/graffle/issues/1017). + +For example the [pokemon schema](../../examples/01_about/pokemon-schema.md) has these two root fields: + +```graphql +type Mutation { + addPokemon(attack: Int, defense: Int, hp: Int, name: String!, type: PokemonType!): Pokemon + # ... +} +``` + +And you could select both with `$batch` in a single request: + +```ts twoslash +import { Pokemon } from './pokemon/__.js' +const pokemon = Pokemon.create() +// ---cut--- +const result = await pokemon.query.$batch({ + // ^^^^^^ + pokemons: { + name: true, + }, + trainers: { + name: true, + }, +}) +``` + +### Example + +