Many companies transitioned from offering REST APIs of their services to developers, to (also) expose a GraphQL API. Examples of companies that did this are Github, Shopify, and many others. Often, their reasons for doing so is to make it easier for developers to query (or mutate) only the data they actually need. But there's a big difference in consuming a GraphQL API as opposed to building one yourself. When building one, you have to dive into the different approaches and patterns like schema-first vs. code-first (see this article for a more in-depth explanation), or have a data source to connect with.
In this blogpost I collected 5 examples of GraphQL APIs that have both a demo you can actually try, and have a public repository with their source code. Using these examples you cannot only learn how to structure a GraphQL API, but can also create a web application that consumes these APIs to learn about GraphQL frontend tooling. Let's dive in!
This project wraps the popular Star Wars API (SWAPI), that I'm using a lot in workshops or whenever I want to create a prototype to test a new technology. By using packages like data-loader to efficiently fetch the data and aws-serverless-express to run cheap on serverless, this is a great example for everyone who wants to get started with building GraphQL APIs. A full example of this API can be found here.
SWAPI GraphQL Wrapper
- DataLoader - for coalescing and caching fetches.
- express-graphql - to provide HTTP access to GraphQL.
aws-serverless-express - to use
express-graphqlon aws lambda.
- GraphiQL - for easy exploration of this GraphQL server.
Try it out at: http://graphql.org/swapi-graphql
Install dependencies with
The SWAPI wrapper is in
./swapi. It can be tested with:
A local express server is in
./server. It can be run with:
yarn build # Only if you changed something yarn start
A GraphiQL instance will be opened at http://localhost:8080/ (or similar; the actual port number will be printed to the console) to explore the API.
Conferences aren't only a good place to learn at, they can also teach you new stuff in other ways. The organizers of React Finland, have made the code of the API for their conference website available online. As they also organize a GraphQL conference, they know how to setup a GraphQL API. You can inspect their API here, and already start learning from a conference before even visiting one!
GraphQL API for TOSKA conferences
Simple GraphQL API for our conferences:
To see the query API:
NODE_ENV="development" npm start
The images are pushed to Cloudinary and it's used as our image CDN. Remember to set
.env for local development if you want to use images:
CLOUDINARY_CLOUD_NAME=react-finland CLOUDINARY_API_KEY=<get from Cloudinary account> CLOUDINARY_API_SECRET=<get from Cloudinary account>
Also remember to set the same on the host of the API.
You can access images through
Heroku to Netlify
The API has been connected to the site using a webhook so that it builds whenever the API changes:
heroku config:set REBUILD_SITES=<Netlify urls separate by comma go here> -a react-finland-api
Remember to run the server in production mode. That will enable site rebuilding hook!
On the free online Artsy platform you can discover and collect art, both on web and mobile devices. Besides that they're a popular website for art enthusiasts, they've open-sourced the GraphQL API that fills their applications with data. You can try out their API here against staging data, giving you a clear impression of the capabilities. The source code of this project shows you how to set up a production-grade GraphQL API 💪.
It is built on
providing a sandbox to work with.
- State: production
CI/Deploys: CircleCi; merged PRs to
artsy/metaphysics#masterare automatically deployed to staging; PRs from
releaseare automatically deployed to production. Start a deploy...
- Kubernetes deployment dashboard
- Datadog Monitoring - Overview
- Datadog Monitoring - GraphQL Queries
- Datadog Monitoring - GraphQL Resolver
- Datadog Monitoring - Express
- Datadog Monitoring - HTTP Requests
- Datadog Monitoring - Cache
- DataDog Monitoring - ELB
- DataDog Monitoring - NodeJS VM / Custom Metrics
- Sentry error reporting
- Papertrail logs
- When Disaster Strikes
This API by Carlos Rufo let's you explore all the public data that's available from SpaceX, and query it with GraphQL. By going to the interface of this GraphQL API here you can discover information about previous launches, SpaceX rockets and much more. Also, this project features examples to help you hook up a web application to it. One of these examples for a React application with Apollo can be found on this CodeSandbox. How cool is that?
SpaceX Land API
GraphQL & REST APIs to explore all the
🚀, launches & other SpaceX's data!
also, for those
Navigate through all the SpaceX data having the most
Introspect the available data just clicking checkboxes, have the ability to define precisely the data you want, replace multiple requests with a single call, discover new ways to interact with APIs!
If you're indeed an old school API fan, don't miss the auto-generated REST API based on it respective GraphQL schema!
It has never been easier to create & share
This final API in this list is also one that works well for GraphQL beginners due to its simple structure, and features the popular television show Rick and Morty. It exposes all the data about to show to both a GraphQL and a REST API, so you can easily compare the both technologies. The project was created by Axel Fuhrmann, and the GraphQL endpoint can be viewed on this url. Get ready to learn all about Rick and Morty!
The Rick and Morty API
Hey, did you ever want to hold a terry fold I got one right here, grab my terry flap.
To get started check the documentation on rickandmortyapi.com or just keep reading ;)
You can check the code of the site here
- Run the API locally
Any projects that are missing in this list? Let me know in the comments and don't forget to leave any feedback 😄!