Supercharge your GraphQL Development
Jon Wong is a Frontend Infrastructure Engineer at Coursera. He thinks a lot about developer productivity, and recently has been thinking often about how people use GraphQL.
Today, Jon claims he’ll teach us how to supercharge our GraphQL development faster than Lee Byron can tie a bowtie.
There are 3 tools he’ll teach us today that’ll help supercharge your GraphQL development:
Why are these tools important and useful to learn?
Before we begin… you need your GraphQL schema:
yarn add graphql-cli graphql-init graphql get-schema
eslint-plugin-graphql can be used to check the validity of your GraphQL queries. To add a rule, add a rule to your .graphql config file.
Jon gives us a quick demo that shows us how the
graphql/template-string rule will warn you when you try to use a field that doesn’t exist.
Other rules that eslint-plugin-graphql provides include:
graphql/named-operations: enforce operation names to make queries easier to debug and trace
graphql/required-fields: enforce presence of particular fields
Apollo-codegen is a tool to generate API code or type annotations based on a GraphQL schema and query documents. It supports Flow, TypeScript, Swift, and Scala targets
Apollo-codgen ensures that:
Using apollo-codegen with queries and fragments is useful. Attempting to use an undeclared field from a fragment declaration won’t get caught by a linter, but will get caught by types.