loading...
Cover image for 5 Examples of JavaScript GraphQL APIs to Learn From

5 Examples of JavaScript GraphQL APIs to Learn From

gethackteam profile image Roy Derks ・3 min read

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.

GitHub logo 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:

Try it out at: http://graphql.org/swapi-graphql

Deploy to Heroku Deploy to now

Getting Started

Install dependencies with

yarn

SWAPI Wrapper

The SWAPI wrapper is in ./swapi. It can be tested with:

yarn test

Local Server

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.




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!

GitHub logo ReactFinland / graphql-api

GraphQL API for the conference.

Codeship Status for ReactFinland/graphql-api

GraphQL API for TOSKA conferences

Simple GraphQL API for our conferences:

To see the query API:

  1. NODE_ENV="development" npm start
  2. http://localhost:3000/graphql-2018 or http://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 πŸ’ͺ.

GitHub logo 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 CircleCI codecov

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?

GitHub logo 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
πŸ‘©β€πŸ’»TechiesΒ Β πŸ‘¨β€πŸ«
πŸ‘΄& no techiesΒ Β πŸ‘©β€πŸŒΎ
🌏from everywhereΒ πŸŒ–
πŸ’»with any deviceΒ πŸ“±
also, for those
πŸ‘©β€πŸš€little dreamersΒ Β πŸ‘¨β€πŸš€

Usage

Navigate through all the SpaceX data having the most ✨user & developer experience!
βœ‹ Setups/Auths
πŸ€— Fully updated docs
😍 Interactive web-based

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!

πŸ’œGraphQL πŸ”—https://api.spacex.land/graphql

If you're indeed an old school API fan, don't miss the auto-generated REST API based on it respective GraphQL schema!

πŸ–€REST πŸ”—https://api.spacex.land/rest

Build Cool πŸš€ Stuff

It has never been easier to create & share πŸ’―web application projects using your favorite FE…

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!

GitHub logo afuh / rick-and-morty-api

The Rick and Morty API

Travis Coveralls github branch Twitter Follow

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 πŸ˜„!

Discussion

pic
Editor guide