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!
SWAPI GraphQL Wrapper
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.
graphql
/
swapi-graphql
A GraphQL schema and server wrapping SWAPI.
SWAPI GraphQL Wrapper
A wrapper around SWAPI built using GraphQL converting it into this schema.
Uses:
- graphql-js - a JavaScript GraphQL runtime.
- 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
Getting Started
Install dependencies with
yarnSWAPI Wrapper
The SWAPI wrapper is in ./swapi. It can be tested with:
yarn testLocal Server
A local express server is in ./server. It can be run with:
yarn build # Only if you changed something
yarn startA 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.
React Finland
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!
ReactFinland
/
graphql-api
GraphQL API for the conference.
GraphQL API for TOSKA conferences
Simple GraphQL API for our conferences:
To see the query API:
NODE_ENV="development" npm start-
http://localhost:3000/graphql-2018orhttp://localhost:3000/calendar-2018.ics(calendar)
Image Processing
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:
.env
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
http://localhost:3000/graphql-2018/images. Example:http://localhost:3000/graphql-2018/images/ken.jpg.
Webhooks
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!
Artsy
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 💪.
artsy
/
metaphysics
Artsy's GraphQL API
Metaphysics
Metaphysics is a GraphQL-compliant API that wraps various Artsy APIs. You can try it here against our staging API.
It is built on express, express-graphql, and graphql. With graphiql
providing a sandbox to work with.
It is currently used in production all over the place in Artsy.net, and the Artsy iOS App
Meta 
- State: production
-
CI/Deploys: CircleCi; merged PRs to
artsy/metaphysics#masterare automatically deployed to staging; PRs fromstagingtoreleaseare automatically deployed to production. Start a deploy... -
Production:
- Endpoint
- 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
- Staging:
SpaceX Land API
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?
spacexland
/
api
🚀 GraphQL & REST APIs to explore all the rockets, launches & other SpaceX's data
SpaceX Land API
GraphQL & REST APIs to explore all the 🚀 , launches & other SpaceX's data!
APIs for
also, for those
Usage
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!
Build Cool 🚀 Stuff
It has never been easier to create & share
Rick and Morty API
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!
afuh
/
rick-and-morty-api
The Rick and Morty API
The Rick and Morty API
Hey, did you ever want to hold a terry fold I got one right here, grab my terry flap.
The Rick and Morty API (or ShlaAPI) is a RESTful and GraphQL API based on the television show Rick and Morty. You will access to data about hundreds of characters, images, locations and episodes.
To get started check the documentation on rickandmortyapi.com or just keep reading ;)
You can check the code of the site here
Contents
Introduction
This…
Any projects that are missing in this list? Let me know in the comments and don't forget to leave any feedback 😄!
Top comments (0)