5 Examples of JavaScript GraphQL APIs to Learn From
Tags: opensource, graphql, javascript
Published: 2020-02-11 10:17:44

---
title: 5 Examples of JavaScript GraphQL APIs to Learn From
published: true
description: Starting with new technologies can be hard, that's why I collected five examples of GraphQL APIs that you can learn from. All examples feature demo sites and Github repositories.
tags: opensource, open-source, graphql, js, javascript
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/as4sxud5ek9fu2zl2uqg.png
---

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](https://www.prisma.io/blog/the-problems-of-schema-first-graphql-development-x1mn4cb0tyl3) 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)](https://swapi.co/), 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](https://github.com/graphql/dataloader) to efficiently fetch the data and [aws-serverless-express](https://github.com/awslabs/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](https://graphql.org/swapi-graphql/).{% github graphql/swapi-graphql %}

## 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](https://react-finland.fi/), 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](https://api.react-finland.fi/graphql), and already start learning from a conference before even visiting one!{% github ReactFinland/graphql-api %}

## Artsy
On the free online [Artsy platform](https://artsy.net) 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](https://metaphysics-staging.artsy.net/) 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 artsy/metaphysics %}

## SpaceX Land API
This API by [Carlos Rufo](https://twitter.com/swcarlosrj) 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](https://api.spacex.land/graphql/) 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](https://codesandbox.io/s/r4p8q1kmvp
). How cool is that?{% github spacexland/api %}

## 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](https://www.adultswim.com/videos/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](https://axelfuhrmann.com/), and the GraphQL endpoint can be viewed on this [url](https://rickandmortyapi.com/graphql/). Get ready to learn all about Rick and Morty!{% github afuh/rick-and-morty-api %}

Any projects that are missing in this list? Let me know in the comments and don't forget to leave any feedback 😄!