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