Document a GraphQL API
Asked Answered
T

8

79

With REST we can use Swagger, RAML or other technologies to document our API and generate an HTML documentation that our consumers can read without any need of interaction with the servers.

Does something similar exist for GraphQL? Is there any way to generate a documentation of resources and properties?

Targe answered 15/9, 2016 at 7:10 Comment(0)
C
36

It looks like there is now https://www.npmjs.com/package/graphql-docs

Dynamically generated documentation explorer for GraphQL schemas. It aims to provide a better overview of a schema than GraphiQL, but without querying features.

enter image description here

You can also generate a static documentation file based on a schema file or GraphQL endpoint:

npm install -g graphql-docs
graphql-docs-gen http://GRAPHQL_ENDPOINT documentation.html
Cerebration answered 31/10, 2016 at 15:42 Comment(2)
Would this work for an endpoint developed using Spring Boot (Java) ?Doty
Note that this hasn't been updated since 2015 (although I haven't investigated more recent forks), and it cannot handle Unions so may not be able to parse your schema.Insurance
G
26

To my knowledge there is no tool yet that automatically generates HTML documentation for a GraphQL API, but I've found GraphiQL to be even more useful than any API documentation in HTML that I've seen.

GraphiQL lets you interactively explore the schema of a GraphQL server and run queries against it at the same time. It has syntax highlighting, autocompletion, and it even tells you when your query is invalid without executing it.

If you're looking for static documentation, I've found it pretty convenient to read the schema in GraphQL schema language. Thanks to another great feature of GraphQL - schema introspection - you can easily print the schema for any server you have access to. Simply run the introspection query against the server and then print the resulting introspection schema like so (using graphql-js):

var graphql = require('graphql');
var introspectionSchema = {}; // paste schema here
console.log(graphql.printSchema(graphql.buildClientSchema(introspectionSchema)));

The result will look something like this:

# An author
type Author {
  id: ID!

  # First and last name of the author
  name: String
}

# The schema's root query type
type Query {

  # Find an author by name (must match exactly)
  author(name: String!): Author
}
Gesualdo answered 15/9, 2016 at 7:43 Comment(1)
Thanks, helfer. The caveat of using the API as documentation is that sometimes the developer needs it before having access. For example: When deciding to buy some API service. You provided a nice alternative to this caveat. Thanks for the useful answer. I'll wait a little and mark it as accepted if none better come.Targe
D
17

I found Static page generator for documenting GraphQL Schema. GitHub link.

HTML export looks like this.

GitHub GraphQL doc example

Doctorate answered 23/2, 2017 at 9:18 Comment(0)
S
13

Actually Graphql is quite self documented with Facebook's built-in Graphiql or the 3rd party tool like Altair because the queries/mutations are listed and return types are also shown there.

One place I found need doc is the input query parameter which might require specific format. This can be achieved by adding a comment on top of those arguments.

  type Query {
      eventSearch(
        # comma separated location IDs. (eg: '5,12,27')
        locationIds: String,
        # Date Time should be ISO 8601: 'YYYY-DD-MM HH:mm:ss'. (eg: '2018-04-23 00:00:00')
        startDateTime: String!,
        endDateTime: String!): [Event]
  }

It will be like below:

Graphiql:

Graphiql

Altair:

Altair

Scotland answered 24/4, 2018 at 15:46 Comment(0)
K
5

Another recent tool is SpectaQL. The output can look like this. Quoting from the README:

Autogenerate static GraphQL API documentation.

SpectaQL is a Node.js library that generates static documentation for a GraphQL schema using a variety of options:

  1. From a live endpoint using the introspection query.
  2. From a file containing an introspection query result.
  3. From a file, files or glob leading to the schema definitions in SDL.

The goal of SpectaQL is to help you keep your documentation complete, current and beautiful with the least amount of pain as possible.

Out of the box, SpectaQL delivers a 3-column page with a modern look and feel. However, many aspects can be customized with ease, and just about everything can be customized if you're willing to dig in.

Kikuyu answered 3/2, 2022 at 18:18 Comment(1)
SpectaQL just released a big update, see the announcement blog post here useanvil.com/blog/engineering/spectaql-one-point-zeroEfrem
F
1

If you're a Sphinx / ReadTheDocs User, you may find https://github.com/hasura/sphinx-graphiql useful.

Fated answered 4/2, 2019 at 11:20 Comment(0)
S
0

There is now Magdoc too, a new tool that can generate static GraphQL documentation websites for any API using either introspection query or sdl files.

This is the GitHub repository, and docs are available at https://magidoc.js.org

Swafford answered 25/4, 2022 at 15:55 Comment(0)
B
0

Can be added to the list: https://github.com/anvilco/spectaql

SpectaQL is a Node.js library that generates static documentation for a GraphQL schema

Barber answered 7/10, 2022 at 11:20 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.