Skip to content

Commit

Permalink
chore(docs): guide for document method
Browse files Browse the repository at this point in the history
  • Loading branch information
jasonkuhrt committed Sep 28, 2024
1 parent 6af92b8 commit fcaccba
Show file tree
Hide file tree
Showing 3 changed files with 60 additions and 11 deletions.
6 changes: 3 additions & 3 deletions website/content/guides/20_methods/20_document.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

<!-- @include: @/_snippets/examples/generated/document.md -->
27 changes: 19 additions & 8 deletions website/content/guides/20_methods/30_root-fields.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

<!-- @include: @/_snippets/examples/generated/root-field.md -->
38 changes: 38 additions & 0 deletions website/content/guides/20_methods/40_batch.md
Original file line number Diff line number Diff line change
@@ -1 +1,39 @@
# Batch <GeneratedClientBadge />

<!-- @include: @/_snippets/example-links/batch.md -->

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

<!-- @include: @/_snippets/examples/generated/batch.md -->

0 comments on commit fcaccba

Please sign in to comment.