Building GraphQL Documentation
Introduction
The in-product API reference documentation for Totara was developed using a third-party tool called SpectaQL. SpectaQL is a NodeJS package which accepts the GraphQL schema (plus some optional metadata) and generates the HTML, CSS and JavaScript needed to display the API reference documentation.
In Totara's implementation, we insert the generated code within a Shadow DOM element within a Totara page in the product, which allows us to keep the SpectaQL and Totara styles isolated from each other to avoid stylesheet conflicts. We implement Totara-specific styling via a SpectaQL theme, and also make use of SpectaQL's data arrangement functionality.
We also mediate the output to allow us to perform permission checks before displaying it, and to allow us to dynamically replace the https://YOUR-SITE-URL
URL with the actual Totara site URL within the documentation.
We ship the generated API reference documentation with our tagged releases, so for uncustomised sites on tagged versions the API reference documentation will automatically be available, and will reflect the API services available in that version.
For sites with code customisations that modify the API schema, developers will need to complete a build step to make the API documentation reflect their API changes. The API documentation page will automatically detect if the site schema differs from the released schema and display a warning if it is out of date.
The documentation build process
In order to build the API documentation you will need:
A working
php
command with access to the site's dataroot folderA working
node
command with access to the site's dataroot folder
In many cases, you may have a single environment that meets both of these requirements, however, our Docker setup used by many developers keeps PHP and node in separate containers, so it is also possible they won't be available at the same time.
Two-step process (separate PHP and node environments)
Step 1: PHP build
The first step is to run a PHP build step, which completes the following tasks:
Build the schema for each endpoint type and store it in a separate file (
api/schema.{$endpoint_type}.graphqls
) in the site's datarootBuild the metadata for each endpoint type and store it in a separate file (
api/metadata.{$endpoint_type}.json
) in the site's datarootBuild the site's component navigation structure (the name and title of all installed components) and store it in a file (
api/nav.js
) in the site's dataroot
The script is executed as follows (starting from the code root folder):
% php server/totara/api/cli/prep_api_docs.php
Schema definitions and metadata saved in /path/to/dataroot/api
If called with the -q flag it will run as before, but only output the name of the directory containing the files without the informational string:
% php server/totara/api/cli/prep_api_docs.php -q
/path/to/dataroot/api
The output files should look something like this:
ls -1 /path/to/dataroot/api
metadata.ajax.json
metadata.dev.json
metadata.external.json
metadata.mobile.json
nav.js
schema.ajax.graphqls
schema.dev.graphqls
schema.external.graphqls
schema.mobile.graphqls
Step 2: Node JS build
Once step 1 is complete, it should be possible to trigger the Node JS build step, which makes use of the files generated in step 1 to build the documentation files.
This can be executed as follows (starting from the code root folder):
This will install the SpectaQL dependencies and execute a script which calls the command and generates the documentation build files in the appropriate code folder (extensions/api_docs/build/spectaql/
). Once complete, you should find two files in that folder: out.html
, which is a single file containing the HTML, CSS and JavaScript for the page, and out.json
, which is a JSON file containing some metadata about the build step (used to detect schema changes).
The API reference documentation should now be available on your site via Quick access menu > Development > API > API Documentation.
Single-step process (combined PHP and node environments)
If PHP and node are both available in a single environment, you should be able to generate the documentation with a single command that passes the location of output from the PHP step to the node step as follows (starting from the code root folder):