-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathllms-full.txt
More file actions
17619 lines (10576 loc) · 326 KB
/
llms-full.txt
File metadata and controls
17619 lines (10576 loc) · 326 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
# GraphQL-Markdown Documentation
> Human-friendly documentation for GraphQL-Markdown schemas and tooling.
Complete offline export of the core docs, API reference, and worked examples published on graphql-markdown.dev.
## Introduction
The `@graphql-markdown/cli` package adds a CLI with commands for generating MDX using a GraphQL schema as the source. It simplifies creating and maintaining GraphQL API documentation by automatically generating well-structured documentation from your schema.
## Why GraphQL Markdown?
Managing API documentation can be time-consuming and prone to becoming outdated. This package solves these challenges by:
- Automatically generating documentation from your schema
- Keeping documentation in sync with your API
- Providing a consistent documentation structure
- Integrating seamlessly with most of the MDX documentation frameworks
## Features
- Easy set up and customizable output
- Full cross-linking between types with visual relationship hierarchy
- MDX output fully customizable using your own components
- Extensible lifecycle hooks and events system
- Any schema loader compatible with `@graphql-tools/load` — SDL files, remote endpoints, or code-first TS/JS schemas
- Group types into categories using directives
- Namespaced operations (nested query/mutation/subscription objects)
- GraphQL config support
## Quick Install
For **Docusaurus** projects:
```bash
npm install @graphql-markdown/docusaurus graphql
```
For **other MDX frameworks** (Astro, Next.js, etc.):
```bash
npm install @graphql-markdown/cli graphql
```
---
## Getting started
:::info
While GraphQL-Markdown was initially developed as a Docusaurus plugin, it now supports various MDX documentation generators. This guide focuses on the Docusaurus integration - for other frameworks, please see our [Framework Integration Guide](/docs/advanced/integration-with-frameworks).
:::
Get started by [creating a new site](#new-docusaurus-site).
Or try GraphQL-Markdown immediately with our [demo](/docs/try-it).
## New Docusaurus site
### Requirements
Node.js version [20.0](https://nodejs.org/en/download/) or above (which can be checked by running `node -v`) is required.
:::info[Package managers]
You can use either `npm`, `yarn`, or `pnpm` as your package manager. The examples in this documentation use `npm`, but you can substitute the commands with your preferred package manager.
When installing Node.js, you are recommended to check all checkboxes related to dependencies.
:::
:::tip
You can use [nvm](https://github.com/nvm-sh/nvm), installed on a single machine, to manage multiple Node.js versions.
:::
### Generate a new site
Generate a new Docusaurus site using the [GraphQL-Markdown template](https://github.com/graphql-markdown/template).
The template will automatically be added to your project after you run the command:
```shell title="shell"
npm init docusaurus my-website https://github.com/graphql-markdown/template.git
```
You can type this command into Command Prompt, Powershell, Terminal, or any other integrated terminal of your code editor.
The command also installs all the necessary dependencies you need to run Docusaurus.
### Add a GraphQL schema loader
A schema loader is required to load your GraphQL schema. The template comes with `@graphql-tools/url-loader` pre-configured for remote schemas.
See [schema loading](/docs/advanced/schema-loading) for other loaders and configuration options.
### Start your site
Run the development server:
```shell title="shell"
cd my-website
npm start
```
:::tip
The `npm run doc` command is a shortcut in the template for command-line document generation: `npm run docusaurus graphql-to-doc`.
:::
The `npm run start` command builds your website locally and serves it through a development server, ready for you to view at [http://localhost:3000/](http://localhost:3000/).
## Existing Docusaurus site
### Prerequisites
:::note
These requirements are specific to Docusaurus integration. See our [Framework Integration Guide](/docs/advanced/integration-with-frameworks) for other frameworks' requirements.
:::
Your project needs to meet the following requirements:
- Node.js version [20.0](https://nodejs.org/en/download/) or above
- [Docusaurus](https://docusaurus.io/) instance version 2.0 or above with the [docs plugin](https://docusaurus.io/docs/docs-introduction) enabled
- [GraphQL.js](https://graphql.org/graphql-js/) version 16.0 or above
### Install the plugin
Add the `@graphql-markdown/docusaurus` plugin to your site installation:
```shell title="shell"
npm install @graphql-markdown/docusaurus graphql
```
### Add a schema loader
See [schema loading](/docs/advanced/schema-loading).
### Configure the plugin
See [configuration](/docs/configuration).
## Update your documentation
Build your website:
```shell title="shell"
npm run docusaurus build
```
Or run the documentation generator directly:
```shell title="shell"
npm run docusaurus graphql-to-doc
```
The `npm run docusaurus graphql-to-doc` command generates MDX files locally from your GraphQL schema. The possible command flags are documented in [settings](/docs/settings).
---
## Try it
## Docusaurus
Use the [CodeSandbox template](https://codesandbox.io/p/sandbox/github/graphql-markdown/demo-docusaurus/tree/main?file=/.graphqlrc) or fork our [demo repo](https://github.com/graphql-markdown/demo-docusaurus) to try with your own GraphQL schema.
Edit the configuration in `.graphqlrc`.
## Astro/Starlight
Use the [CodeSandbox template](https://codesandbox.io/p/sandbox/github/graphql-markdown/demo-astro-starlight/tree/main?file=/.graphqlrc) or fork our [demo repo](https://github.com/graphql-markdown/demo-astro-starlight) to try with your own GraphQL schema.
Edit the configuration in `graphql.config.mjs`.
## Next.js/Fumadocs
Use the [CodeSandbox template](https://codesandbox.io/p/sandbox/github/graphql-markdown/demo-nextjs-fumadocs/tree/main?file=/.graphqlrc) or fork our [demo repo](https://github.com/graphql-markdown/demo-nextjs-fumadocs) to try with your own GraphQL schema.
Edit the configuration in `graphql.config.mjs`.
## Vite/Vocs
Fork our [demo repo](https://github.com/graphql-markdown/demo-vite-vocs) to try with your own GraphQL schema.
Edit the configuration in `graphql.config.mjs`.
## HonKit / GitBook legacy
Fork our [demo repo](https://github.com/graphql-markdown/demo-honkit) to try with your own GraphQL schema.
Edit the configuration in `graphql.config.mjs`.
---
## How It Works
GraphQL-Markdown reads your schema, parses every type and operation, and writes one MDX file per type category — ready to publish with Docusaurus or any MDX framework.
## Pipeline

### Input
Given this schema:
```graphql
type User {
"""User's unique identifier"""
id: ID!
"""User's full name"""
name: String!
"""List of posts authored by this user"""
posts: [Post!]
}
type Post {
id: ID!
title: String!
author: User!
}
type Query {
getUser(id: ID!): User
getPosts: [Post!]!
}
```
### Output
GraphQL-Markdown generates a file per type category. For example, `objects/user.mdx`:
```mdx
---
id: user
title: User
---
# User
Object Type
## Fields
| Name | Type | Description |
| ---- | ---- | ----------- |
| `id` | `ID!` | User's unique identifier |
| `name` | `String!` | User's full name |
| `posts` | [`[Post!]`](/docs/graphql/objects/post) | List of posts authored by this user |
## Returned by
[`getUser`](/docs/graphql/queries/get-user)
```
Notice the cross-link on `Post` and the back-reference under "Returned by" — these are generated automatically from the schema graph.
## What gets generated
| Output | Description |
| ------ | ----------- |
| `objects/` | One file per Object type |
| `inputs/` | One file per Input type |
| `queries/` | One file per Query field |
| `mutations/` | One file per Mutation field |
| `subscriptions/` | One file per Subscription field |
| `enums/` | One file per Enum type |
| `interfaces/` | One file per Interface type |
| `unions/` | One file per Union type |
| `scalars/` | One file per Scalar type |
| `_category_.yml` | Sidebar metadata for each folder |
## Customization
The generation pipeline exposes lifecycle hooks at every stage — before/after schema load, before/after rendering each type, before/after composing each page. See [hook recipes](/docs/advanced/hook-recipes) and [custom directives](/docs/advanced/custom-directive).
To see the full output in action, browse the [live examples](/examples/default).
---
## Configuration Cheat Sheet
:::note
This is a quick reference guide. All settings are thoroughly documented in the [**Settings** page](/docs/settings).
:::
## Essential Options
| Option | Type | Default | Description |
| ---------- | -------- | ---------- | --------------------------------------------------------- |
| `schema` | `string` | — | **Required**. Path to schema file or introspection result |
| `rootPath` | `string` | `./docs` | Root folder for documentation generation |
| `baseURL` | `string` | `/graphql` | Base URL path for generated documentation |
## Document Structure
| Option | Type | Default | Description |
| -------------- | ------------------------ | ------- | --------------------------------------------------------------------- |
| `linkRoot` | `string` | `/` | Root path used for type cross-links in generated documentation |
| `homepage` | `string` | — | Custom homepage content file |
| `hierarchy` | `string` | `api` | Documentation structure: `api`, `entity`, or `flat` |
| `index` | `boolean` | `false` | Generate category indices |
| `categorySort` | `string` \| `function` | — | Sort categories: `"natural"` for alphabetical or custom function |
| `pretty` | `boolean` | `false` | Format generated Markdown files |
## Content Options
| Option | Type | Default | Description |
| --------------- | --------- | ------- | -------------------------- |
| `noCode` | `boolean` | `false` | Hide code sections |
| `noExample` | `boolean` | `false` | Hide example sections |
| `noParentType` | `boolean` | `false` | Hide parent type prefix |
| `noRelatedType` | `boolean` | `false` | Hide related types section |
| `noTypeBadges` | `boolean` | `false` | Hide type badges |
## Filtering Options
| Option | Type | Default | Description |
| ------------------ | ---------- | --------- | ------------------------------------------------------------------ |
| `groupByDirective` | `string` | — | Group by directive: `@directive(field)` or `@directive(=fallback)` |
| `only` | `string[]` | — | Include only types with specified directives |
| `skip` | `string[]` | — | Exclude types with specified directives |
| `deprecated` | `string` | `default` | Handling of deprecated items: `default`, `group`, `skip` |
## Build Control Options
| Option | Type | Default | Description |
| ------------- | --------- | ------- | ----------------------------------------------------------------- |
| `force` | `boolean` | `false` | Force regeneration of all files |
| `diffMethod` | `string` | `NONE` | Change detection: `NONE`, `FORCE`, `SCHEMA-DIFF`, `SCHEMA-HASH` |
| `tmpDir` | `string` | — | Temporary directory for storing schema signature (used by diff) |
| `pretty` | `boolean` | `false` | Format output files with Prettier (requires `prettier` installed) |
| `mdxParser` | `string` | — | Path to a custom MDX formatter module |
## CLI Flags
All config options can be passed as CLI flags to `npx docusaurus graphql-to-doc` or `npx graphql-markdown`.
| Flag | Config option | Description |
| --------------------------------- | ------------------------------------- | ---------------------------------------------- |
| `-s, --schema <path>` | `schema` | Schema file, URL, or introspection JSON |
| `-b, --base <baseURL>` | `baseURL` | Base URL and output folder name |
| `-r, --root <rootPath>` | `rootPath` | Root output folder |
| `-l, --link <linkRoot>` | `linkRoot` | Root path for cross-links |
| `-h, --homepage <file>` | `homepage` | Custom homepage file |
| `-f, --force` | `force` | Skip diff, always regenerate |
| `-d, --diff <method>` | `diffMethod` | Diff method (`NONE`, `SCHEMA-DIFF`, etc.) |
| `-t, --tmp <dir>` | `tmpDir` | Temp dir for schema diffing |
| `--index` | `docOptions.index` | Generate category index pages |
| `--hierarchy <type>` | `printTypeOptions.hierarchy` | Folder structure: `api`, `entity`, `flat` |
| `--deprecated <option>` | `printTypeOptions.deprecated` | `default`, `group`, or `skip` |
| `--noParentType` | `printTypeOptions.parentTypePrefix` | Hide parent type prefix on fields |
| `--noTypeBadges` | `printTypeOptions.typeBadges` | Hide type attribute badges |
| `--only <@directive...>` | `onlyDocDirective` | Include only types with these directives |
| `--skip <@directive...>` | `skipDocDirective` | Exclude types with these directives |
| `-gdb, --groupByDirective <expr>` | `groupByDirective` | Group by directive: `@dir(field\|=fallback)` |
| `--pretty` | `pretty` | Format output with Prettier |
| `--mdxParser <path>` | `mdxParser` | Custom MDX formatter module |
| `--config` | — | Print resolved config (debug) |
---
## Configuration
GraphQL-Markdown supports three configuration methods. Later entries in this list take precedence over earlier ones.
## Framework-agnostic Configuration
### GraphQL Config
:::tip
GraphQL Config is the recommended way to configure GraphQL-Markdown across all frameworks.
:::
You can use a [GraphQL Config](https://the-guild.dev/graphql/config/docs/user/usage) file (multiple formats supported) to configure GraphQL-Markdown:
```yaml title=".graphqlrc"
schema: "https://graphql.anilist.co/"
extensions:
graphql-markdown:
linkRoot: "/examples/default"
baseURL: "."
homepage: "data/anilist.md"
loaders:
UrlLoader:
module: "@graphql-tools/url-loader"
options:
method: "POST"
printTypeOptions:
deprecated: "group"
```
## Docusaurus Integration
### Plugin Configuration
You can define plugin settings directly in your Docusaurus configuration file `docusaurus.config.js`:
```js title="docusaurus.config.js"
module.exports = {
// ...
plugins: [
[
"@graphql-markdown/docusaurus",
/** @type {import('@graphql-markdown/types').ConfigOptions} */
{
schema: "./schema/swapi.graphql",
rootPath: "./docs", // docs will be generated under './docs/swapi' (rootPath/baseURL)
baseURL: "swapi",
homepage: "./docs/swapi.md",
loaders: {
GraphQLFileLoader: "@graphql-tools/graphql-file-loader", // local file schema
},
// Optional advanced settings
pretty: true,
},
],
],
};
```
All settings are described in the page **[settings](/docs/settings)**.
:::tip
If you want to use several GraphQL schemas, read our guide for **[additional schemas](/docs/advanced/additional-schema)**.
:::
### Site Settings
You will also need to add a link to your documentation on your site. One way to do it is to add it to your site's `navbar` in `docusaurus.config.js`:
```js title="docusaurus.config.js"
module.exports = {
// ...
navbar: {
items: [
{
to: "/swapi/homepage", // adjust the location depending on your baseURL (see configuration)
label: "SWAPI Schema", // change the label with yours
position: "left",
},
],
},
};
```
For more details about the `navbar`, please refer to Docusaurus [documentation](https://docusaurus.io/docs/api/themes/configuration#navbar).
## Configuration Lifecycle
GraphQL-Markdown processes configuration sources in the following priority order (later sources override earlier ones):
1. **Default configuration**: Built-in default settings
2. **GraphQL Config file** (`.graphqlrc`): Framework-agnostic project settings
3. **Framework-specific configuration**: (e.g., Docusaurus plugin settings)
4. **CLI flags**: Command-line arguments override all other settings
:::tip
For any framework, you can use CLI flags to temporarily override settings without modifying your configuration files.
:::
**Current limitations:**
- Single schema only, no schema stitching
- `include`, `exclude`, `documents` and glob pattern are not supported
---
## Additional schemas
If you need to support multiple schemas, then you can set multiple instances of the plugin
Assign a unique `id` attribute to each plugin instance (if not set, then `id` value is `default`).
```js title="docusaurus.config.js"
plugins: [
[
"@graphql-markdown/docusaurus",
/** @type {import('@graphql-markdown/types').ConfigOptions} */
{
// highlight-next-line
// id: 'default', // omitted => default instance
schema: "./schema/swapi.graphql",
rootPath: "./docs", // docs will be generated under './docs/swapi' (rootPath/baseURL)
baseURL: "swapi",
homepage: "./docs/swapi.md",
loaders: {
GraphQLFileLoader: "@graphql-tools/graphql-file-loader" // local file schema
}
},
],
[
"@graphql-markdown/docusaurus",
/** @type {import('@graphql-markdown/types').ConfigOptions} */
{
// highlight-next-line
id: "admin",
schema: "./schema/admin.graphql",
rootPath: "./docs", // docs will be generated under './docs/admin' (rootPath/baseURL)
baseURL: "admin",
homepage: "./docs/admin.md",
loaders: {
GraphQLFileLoader: "@graphql-tools/graphql-file-loader" // local file schema
}
},
],
],
```
Instance with an `id` will have their command line:
```shell
npm run docusaurus graphql-to-doc:admin
```
## GraphQL Config
If you use [GraphQL config](/docs/configuration#graphql-config), then you need to define `projects` with the same `id` (including `default`).
```js title="docusaurus.config.js"
plugins: [
"@graphql-markdown/docusaurus", // default instance
[
"@graphql-markdown/docusaurus",
/** @type {import('@graphql-markdown/types').ConfigOptions} */
{
// highlight-next-line
id: "admin",
},
],
],
```
```yaml title=".graphqlrc"
projects:
# highlight-next-line
default:
schema: "./schema/swapi.graphql"
extensions:
graphql-markdown:
linkRoot: "./docs"
baseURL: "swapi"
homepage: "./docs/swapi.md"
loaders:
GraphQLFileLoader: "@graphql-tools/graphql-file-loader"
# highlight-next-line
admin:
schema: "./schema/admin.graphql"
extensions:
graphql-markdown:
linkRoot: "./docs"
baseURL: "admin"
homepage: "./docs/admin.md"
loaders:
GraphQLFileLoader: "@graphql-tools/graphql-file-loader"
```
---
## Customize deprecated sections
When using the option [`printTypeOptions.deprecated`](/docs/settings#printtypeoptions) set to `group`, the rendering can be customized using the CSS class `.deprecated`.
Adding a `warning` emoji ⚠️ is done with a quick tweak of [Docusaurus CSS](https://docusaurus.io/docs/styling-layout).
```css title="/src/css/custom.css"
.deprecated a::after,
span.deprecated::after {
content: "⚠️";
padding-left: 4px !important;
transform: none !important;
}
.deprecated {
padding-top: 1rem;
}
```
The above CSS will render the deprecated sections as the following

---
## Custom schema directives handling
For directives applied to the schema, you can select which ones to be rendered for the types or in the locations they are declared. Information about the custom directives includes a custom description.
For example, we have one query called `searchRole`, and we want to limit access to `ADMIN` user roles only.
We can accomplish this by adding a directive called `auth` with an argument `requires` to the query.
```graphql
directive @auth(requires: Roles = ADMIN) on OBJECT | FIELD_DEFINITION
enum Roles {
ADMIN
USER
}
type Query {
searchRole(roles: [Roles!]! = [ADMIN]): Int! @auth
}
```
## Usage
Add the option [`customDirective`](/docs/settings#customdirective) to the `@graphql-markdown/docusaurus` configuration.
The `descriptor` and `tag` functions receive 2 arguments:
- `directive` of type [`GraphQLDirective`](https://github.com/graphql/graphql-js/blob/main/src/type/directives.ts)
- `node` of type [`GraphQLNamedType`](https://github.com/graphql/graphql-js/blob/main/src/type/definition.ts) or [`ASTNode`](https://github.com/graphql/graphql-js/blob/main/src/language/ast.ts)
```ts
type DirectiveName = string & { _opaque: typeof DirectiveName };
type CustomDirective = {
[name: DirectiveName]: {
descriptor?: (directive?: GraphQLDirective, node?: unknown): string;
tag?: (directive?: GraphQLDirective, node?: unknown): Badge;
};
};
type Badge = {
text: string | TypeLocale;
classname: string;
};
```
### `descriptor`
The `descriptor` allows rendering the custom directive's description applicable to entities.
```js title="docusaurus.config.js"
plugins: [
[
"@graphql-markdown/docusaurus",
/** @type {import('@graphql-markdown/types').ConfigOptions} */
{
// ... other options
customDirective: {
auth: {
// highlight-start
descriptor: (directive, node) =>
directiveDescriptor(
directive,
node,
"This requires the current user to be in `${requires}` role.",
),
// highlight-end
}
// ... other custom directive options
},
},
],
],
```
### `tag`
The `tag` allows rendering custom badges (tags) based on the custom directive applicable to entities.
```js title="docusaurus.config.js"
plugins: [
[
"@graphql-markdown/docusaurus",
/** @type {import('@graphql-markdown/types').ConfigOptions} */
{
// ... other options
customDirective: {
beta: {
// highlight-next-line
tag: (directive, node) => ({ text: directive.name, classname: "badge--info" }),
}
// ... other custom directive options
},
},
],
],
```
### Wildcard
You can use **`"*"` as a wildcard** for the directive name. This will allow all directives not declared with their name under `customDirective` to be handled by the wildcard `descriptor` and/or `tag`.
```js title="docusaurus.config.js"
const { directiveDescriptor, tagDescriptor } = require("@graphql-markdown/helpers");
//...//
plugins: [
[
"@graphql-markdown/docusaurus",
/** @type {import('@graphql-markdown/types').ConfigOptions} */
{
// ... other options
customDirective: {
// highlight-start
"*": {
descriptor: directiveDescriptor,
tag: tagDescriptor,
},
// highlight-end
// ... optionally specific custom directive options
},
},
],
],
```
## Helpers
The packages `@graphql-markdown/helpers` and `@graphql-markdown/graphql` provide a few helper functions to quickly start.
:::info
`@graphql-markdown/helpers` is an optional peer dependency, and it needs to be installed before using it.
```shell title="shell"
npm i @graphql-markdown/helpers
```
:::
### `@graphql-markdown/helpers`
- [`directiveDescriptor`](/api/helpers/directives/descriptor)
- [`tagDescriptor`](/api/helpers/directives/tag)
### `@graphql-markdown/graphql`
- [`getTypeDirectiveValues`](/api/graphql/introspection#gettypedirectivevalues)
- [`getTypeDirectiveArgValue`](/api/graphql/introspection#gettypedirectiveargvalue)
---
## Custom root types
For custom operation root types (queries not of type `Query`, or root type name used for other purpose), use the loader option `RootTypes`:
```ts
type RootTypes = { query?: string; mutation?: string; subscription?: string };
```
- use a custom type name to override the standard type
- use an empty string to disable the GraphQL standard type
- unset root types will use the GraphQL standard type
Add the option `rootTypes` to the loader options under `@graphql-markdown/docusaurus` configuration (see also [schema loading](/docs/advanced/schema-loading)):
```js title="docusaurus.config.js"
plugins: [
[
"@graphql-markdown/docusaurus",
/** @type {import('@graphql-markdown/types').ConfigOptions} */
{
// ... other options
loaders: {
GraphQLFileLoader: {
module: "@graphql-tools/graphql-file-loader",
options: {
// highlight-start
rootTypes: {
query: "Root", // use custom root type Root for queries, instead of Query
subscription: "" // disable Subscription type
},
// highlight-end
},
},
},
},
],
],
```
---
## Examples
By enabling the option [`printTypeOptions.exampleSection`](/docs/settings#printtypeoptions), you can add examples to types documentation.
## Usage
**1. Add a type definition directive `@example` to the schema**
```graphql
directive @example(
value: String
) on OBJECT | INPUT_OBJECT | INTERFACE | FIELD_DEFINITION | ARGUMENT_DEFINITION | SCALAR
```
**2. Add examples to the schema**
```graphql
scalar Date @example(value: "1970-01-01")
interface Record {
id: ID! @example(value: "1")
}
type Course implements Record @example(value: "{ \"id\": 2, \"title\": \"GraphQL\" }") {
id: ID!
title: String!
}
type Semester implements Record {
id: ID!
startDate: Date
withdrawDate: Date @deprecated
endDate: Date
courses: [Course!]!
}
type Query {
course(id: ID!): Course @example(value: "{ course(id: \"1\") { title } }")
}
```
Examples can be inherited, this is why in the above example there is no example explicitly set for the type `Semester`, and it will render as the following

## Advanced options
Example directive definition and parser behavior can be customized through the configuration using a `TypeDirectiveExample` object instead of a boolean value for `printTypeOptions.exampleSection`:
```ts
interface TypeExampleSectionOption {
directive?: string; // customize the directive name
field?: string; // customize the directive's field name
parser?: (value?: unknown, type?: unknown) => unknown; // customize the field's value parsing
}
```
For example, if the GraphQL schema already supports examples using the `@spectaql` directive.
```graphql
type CustomExampleDirective {
myField: String @spectaql(options: [{ key: "undocumented", value: "true" }])
myFieldOtherField: String @spectaql(options: [{ key: "example", value: "An Example from the Directive" }])
myFieldOtherOtherField: String @spectaql(options: [{ key: "examples", value: "[\"Example 1 from the Directive\", \"Example 2 from the Directive\"]" }])
}
```
```js title="docusaurus.config.js"
plugins: [
[
"@graphql-markdown/docusaurus",
/** @type {import('@graphql-markdown/types').ConfigOptions} */
{
// ... other options
printTypeOptions: {
exampleSection: {
directive: "spectaql",
field: "options",
/* simplified parser for @spectaql (non production ready) */
parser: (options, type) => {
if (!options) {
return undefined;
}
const example = options.find(
(option) => {
return ["example", "examples"].includes(option.key);
},
);
if (!example) {
return undefined;
}
if (example.key === "example") {
return example.value;
}
return JSON.parse(example.value)[0];
}
}
}
}
]
]
```
---
## Documentation categories
You can group the documentation to provide an easier user experience to navigate. This is accomplished by adding a directive to all the types you want to have grouped.
For example, we have two mutations called `addCourse` and `dropCourse`, and we want to group them under a category called `Courses`.
```graphql
type Mutation {
AddCourse(input: String): String
DropCourse(input: String): String
}
```
## Usage
We can accomplish this by adding a directive called `doc` with a field `category` to each mutation.
```graphql
type Mutation {
AddCourse(input: String): String @doc(category: "Course")
DropCourse(input: String): String @doc(category: "Course")
}
```
We can add a fallback option called `Common` which is for types that we don't explicitly add a directive to.
It can be set either with the command line flag `--groupByDirective`:
```shell
npx docusaurus graphql-to-doc --groupByDirective "@doc(category|=Common)"
```
or the plugin configuration `groupByDirective`:
```js title="docusaurus.config.js"
plugins: [
[
"@graphql-markdown/docusaurus",
/** @type {import('@graphql-markdown/types').ConfigOptions} */
{
// ... other options
// highlight-start
groupByDirective: {
directive: "doc",
field: "category",
fallback: "Common", // default is Miscellaneous
}
// highlight-end
},
],
],
```
---
## Homepage
If you decide to use a custom homepage for the GraphQL-generated documentation, then set the sidebar position to `sidebar_position: 1` to ensure it shows first:
```markdown title="schema.md"
---
id: schema
slug: /schema
title: Schema Documentation
sidebar_position: 1
---
This documentation has been automatically generated from the GraphQL schema.
```
:::tip
If you want to hide the homepage from the sidebar, then set the front matter `sidebar_class_name` (or `className` depending on your Docusaurus version) to `navbar__toggle`.
```markdown {6} title="schema.md"
---
id: schema
slug: /schema
title: Schema Documentation
sidebar_position: 1
sidebar_class_name: navbar__toggle
---
```
:::
---
## Hooks Recipes
This page lists examples of usage of [hooks](/api/category/events).
:::info