Andrew Flett andflett

GraphQL

We use GraphQL Code Generator with the client preset to make it simple to write queries, mutations, and fragments in a way which is typesafe and extensible. This article is a good place to start if you're new to GraphQL and React, or are more familiar with the old way of using plugins to generate separate React hooks for each query.

To encourage consistancy in what and how we display our oft complex data models, we provide a handful of global queries. However, if you do need a query or mutation that is only going to be used in a single component, it's advisable to use graphql inline with useQuery, rather than cluttering up the global generated queries. See usage below.

For the global scope - to ensure we're not loading more data than is nessesary - we build up our queries as such

	// We generate a JSON file containing all components' metadata from comments in
	// JSDoc format within the source code itself, and publish this (versioned)
	// along side the design system for use in our docs site.
	var fs = require("fs");

	// eslint-disable-next-line no-unused-vars
	const colors = require("colors");
	var read = require("fs-readdir-recursive");
	const docgen = require("react-docgen-typescript");