An Introduction to GraphQL

This is a short introduction to GraphQL. GraphQL makes it easier to query the data in an API. GraphQL has the power to specify exactly the data you need from an API without having to retrieve data you don't plan on using.

You will be asked to follow along with the programs below. Just click on the links and a code playback page will load (you might want to open each one in a new tab). Then click on the comments on the left hand side of the playback screen or hit the play button to drive the development of the code. You can download the code at any point and run it on your machine. There are some controls in the top right hand side of the screen to make the text bigger or to switch to blog mode (which is good for small screens).

GraphQL

I start by showing how a traditional API works. This example uses Express and a SQLite database to serve an API:

• A Traditional API

Next, I show what a GraphQL query looks like independent of any programming language:

• GraphQL Query Syntax

The next two examples show how to create an API using GraphQL. One uses a database and the other doesn't:

• A GraphQL Server Without a Database
• A GraphQL Server that Uses a Database

The final two programs show how to access a GraphQL server from the browser and the server:

• Accessing a GraphQL Server Using fetch() and graphql-request
• Using React to Access a GraphQL Server

Comments and Feedback

You can find all of these code playbacks in my free 'book', An Introduction to Web Development from Back to Front. I am always looking for feedback so please feel free to comment here or to send me a message. You can follow me on twitter @markm208.