Navigating Your Transition to GraphQL

Sashko Stubailo and Danielle Man

Although it's only a few years old, GraphQL has already generated tremendous excitement among tech firms, startups and developers alike. GraphQL was initially created and released at Facebook in 2012, where it was used in the company's native iOS application. Three years later, GraphQL was officially announced to the public and open sourced at the ReactEurope conference. In September 2016, it finally became production-ready, with new documentation and support from GitHub for use with its public API.

As more and more companies experiment with and embrace GraphQL, it is easier than ever to try it out for yourself. With so many tools and resources available, you can benefit from the experience and knowledge of those in the community who have already adopted and contributed to GraphQL. Here are a few things that you need to be aware of before starting on your GraphQL journey, and a few examples that you can build on for your own projects.

GraphQL-First Workflow

Traditional constructions such as the database schema, with its manifold boxes and arrows, are not always relevant to software development today. Front-end developers no longer directly interact with a database, but rather via an API that might not share the same fields. In addition, not all of the fields may be in the same database; they may be dispersed throughout MongoDB and various APIs.

Companies using GraphQL often choose to adopt what's known as the GraphQL-First development workflow. As the name implies, GraphQL-First means that your application's GraphQL schema, which is language- and technology-agnostic, should be your first point of consideration during development. The schema serves as the meeting point for, and the unifying link between, your front end and your back end.

The essential steps of GraphQL First development can be enumerated as follows:

  1. API schema design. The GraphQL schema is a contract between your application's front end and back end that defines the possible queries that can be made by your application. By establishing a set of principles that both sides agree on, your front end and back end can operate independently, without worrying about the details of the other's implementation.
  2. UI and backend construction. Because the GraphQL schema is so strongly typed, different pieces of your application can be developed in parallel. Each component can be tested with mock data generated from the schema, and then connected with the other components once it's ready to be deployed.
  3. Running in production. The current best practice is to make static queries in the GraphQL language. GraphQL's rigorous structure means that you can check the results of your queries in order to verify that you're retrieving only the data that you need for your application.

Real World Examples

Open-Source Tools

A number of open-source tools developed by Meteor are available to ease your transition into GraphQL. Three of the most popular and useful are described below:

Watch the video