Over the last couple of years, [GraphQL](https://graphql.org/) has been making a name for itself as a powerful alternative for REST API. No wonder that gradually more and more people want to jump in on that sweet GraphQL hype train, but certainly not everyone wants to get their hands dirty, building an API by themselves. While doing that using one of the most popular tools out there (like [Express](https://github.com/graphql/express-graphql) or [Apollo](https://github.com/apollographql)) doesn’t have to be a chore, there is a way to have some fun with GraphQL without touching the server side.

Let’s have a look at our list of some public GraphQL APIs you can play with:

### 1. [Countries GraphQL API](https://github.com/trevorblades/countries)

For a nice warm-up, let’s dive into Countries API built by GitHub user Trevor Blades, who used [Countries List](https://annexare.github.io/Countries/) as his source of data. Thanks to that, we can now query the API for fields such as:

* name and native name
* currency
* languages
  * name and native name
  * rtl
* phone (for countries’ mobile prefixes)
* emoji

Here are some example queries:

* Get a list of all the countries’ names and their respective native versions.

![Countries API query](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/media/1q-1732202088650.webp)
![Countries API response](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/media/1r-1732202094708.webp)

* Get the currency and phone prefix in United Arab Emirates by its code.

![Countries API query](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/media/2q-1732202100607.webp)
![Countries API response](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/media/2r-1732202106373.webp)

After getting familiar with the API, you can make use of it by building a quiz app or have a look at [byrichardpowell’s implementation](https://github.com/byrichardpowell/Country-Quiz). Using React, TypeScript and Apollo, he managed to build a PWA fueled by Trevor Blades’ work.

You can check out the API’s playground [here](https://countries.trevorblades.com/).

### 2. [Contentful - Content Delivery API](https://www.contentful.com/developers/docs/tutorials/general/graphql/)

Contentful is a popular headless CMS, which offers plenty of flexibility in implementation. You can decide on choosing your own Front-End framework, as well as whether you want to get the data through REST or GraphQL API.

The team behind this product put in a large effort to make the experience of interacting with their GraphQL API as painless as possible. Thanks to that, every user has access to an [open-source](https://github.com/contentful/the-example-app.nodejs#readme) demo app, whose resources you can query from an [interactive playground](https://graphql.contentful.com/content/v1/spaces/f8bqpb154z8p/explore?access_token=9d5de88248563ebc0d2ad688d0473f56fcd31c600e419d6c8962f6aed0150599\&query=%7B%0A%20%20lessonCollection$where%3A%20%7B%20%0A%09%09OR%3A%20%5B%0A%09%09%09%7B%20title_contains%3A%20%22content%22%20%7D%2C%0A%09%09%09%7B%20title_contains%3A%20%22SDK%22%20%7D%0A%09%09%5D%0A%20%20%7D$%20%7B%0A%20%20%20%20items%20%7B%0A%20%20%20%20%20%20title%0A%20%20%20%20%20%20slug%0A%20%20%20%20%20%20modulesCollection$limit%3A%202%2C%20skip%3A%201$%20%7B%0A%20%20%20%20%20%20%20%20total%0A%09%09%09%09limit%0A%09%09%09%09skip%0A%20%20%20%20%20%20%20%20items%20%7B%0A%20%20%20%20%20%20%20%20%20%20...imageUrl%0A%09%09%09%09%09...%20on%20LessonCodeSnippets%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20title%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20...%20on%20LessonCopy%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20sys%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20id%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20title%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D%0A%0Afragment%20imageUrl%20on%20LessonImage%20%7B%0A%20%20title%0A%20%20image%20%7B%0A%20%20%20%20url%0A%20%20%7D%0A%7D).

Contentful helps bring to fruition plans of creating easy to manage and pleasant to write dev blog or portfolio. Very nature of headless CMS puts a solid line between Front-End and Back-End and because of that, swapping a view framework is just a matter of delivering the data where it should be, what makes it a perfect fit for GraphQL.

### 3. [GitHub](https://developer.github.com/v4/) / 4. [GitLab](https://docs.gitlab.com/ee/api/graphql/)

Two of the largest players in the software development version control based hosting providers go toe to toe with adding new, cutting-edge features. No wonder then that both of them offer a GraphQL API for their users to consume. GitHub’s docs describe perfectly the motivation that pushes more and more companies towards GraphQL, which is mostly about speed and precision:

> *GitHub chose GraphQL for our API v4 because it offers significantly more flexibility for our integrators. The ability to define precisely the data you want—and only the data you want—is a powerful advantage over the REST API v3 endpoints. GraphQL lets you replace multiple REST requests with a single call to fetch the data you specify.*

Their API is a great starting point for people that are eager to dive into GraphQL world and [GraphQL Editor](https://graphqleditor.com/) makes it significantly easier to browse through the vast structure of its schemas, which you can see in action here. It allows for both querying and mutating the data, which means you can even create your custom reactions to issues:

![GitHub/Gitlab query](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/media/3q-1732202197220.webp)

But for simple getting all of your repositories and its stars, this snippet will do:
![getStars query](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/media/4q-1732202204748.webp)
![getStars response](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/media/4r-1732202211823.webp)

You can play around with it right here.

GitLab, on the other hand, offers slightly less humane docs, but more straight-forward ones. We have some nice [reference resources](https://docs.gitlab.com/ee/api/graphql/reference/) and also mentions of an IDE available on your instance on , but sadly nothing based on a demo app that you can play without prior setup.

### 5. [GraphQL Pokemon](https://github.com/lucasbento/graphql-pokemon)

If you always dreamed about creating your own version of Pokédex (just like creators of this API) or even a Pokémon game, this may be your best shot.

Thanks to [Lucas Bento](https://github.com/lucasbento), you can get every information needed for describing childhood heroes of plenty of us. As usual, you can try the API out in the [interactive console](https://graphql-pokemon.vercel.app/), so if I want to remind myself what is my common feature with Snorlax, I look no further than sending:

![Pokemon query](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/media/5q-1732202218578.webp)

Quickly getting in response:

![Pokemon response](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/media/5r-1732202224968.webp)

### 6. [Star Wars GraphQL API](https://github.com/graphql/swapi-graphql)

I already winked at Pokémon fans, so I could not leave out possibly the biggest fanbase in the world - Star Wars fans. [Star Wars REST API](https://pipedream.com/apps/swapi) has already made a name for itself and now it’s time to swap it with its GraphQL counterpart.

If you would ever come across Princess Leia and asked her about her weight, you would get slapped so hard that even getting carbon-frozen would seem like a pleasant alternative. With SWAPI GraphQL API [you can learn the number without any risk of an injury](https://github.com/graphql/swapi-graphql). The resources are mapped from the [original API](https://pipedream.com/apps/swapi), so you can expect to be able to query starships, vehicles, planets, species, characters and plenty more. It does not get any better than that for developers among Star Wars fans.

### 7. [Spotify - GraphQL API](https://github.com/charlypoly/spotify-graphql)

While Spotify already has a pretty powerful API, there is no official GraphQL support on the horizon. Fortunately, for a service that big and community that productive, you can be sure that someone will pull off an unofficial version for our use.

That was the case with wittydeveloper’s Spotify-GraphQL, which makes it seamless to check if, for example, Ed Sheeran started swearing more over time. It’s just a matter of typing:

![ASpotify GraphQL API query](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/media/6q-1732202230901.webp)

...into the interactive console (which requires you to authenticate the app with your Spotify account).

The creator also offers a handful of [Node + TypeScript query examples](https://github.com/charlypoly/spotify-graphql-examples), where you can find ways of getting data of the user’s playlist or top artist’s tracks.

7 GraphQL APIs to play with

Draqula is a lightweight GraphQL client, perfect for smaller and simpler React apps. Most web apps don't need higher-order components, subscriptions or local state management, that’s where Draqula comes in. It focuses on simple apps and execution using React hooks for building queries and mutations.

The main focus of Draqula is maintaining simple API and codebase as well as being as straightforward as possible by relying on hooks. It also has basic [cache implementation](https://graphqleditor.com/blog/graphql-vs-rest-caching/) and automatic retires for network errors and failed queries. Higher order or render-prop components, and subscriptions will not be supported to maintain the simplicity of the client.

![](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/media/01-1730829499126.webp)

## Set it up

Installing via Yarn or npm is really simple and Draqula is ready to go in a matter of seconds

![](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/media/02-1730829510541.webp)

To start it up attach the URL to your [GraphQL](https://graphqleditor.com/) endpoint

![](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/media/03-1730829521880.webp)

Now to make Draqula available to React components in your app use `DraqulaProvider`. Then find the `render()` function and modify it to include Draqula, like this:

![](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/media/04-1730829540375.webp)

Now all you need to do is run a [GraphQL](https://graphqleditor.com/) query in your components:

![](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/media/05-1730829553218.webp)

## Take it for a spin

Queries have to be made using the `gql` function from the `graphql-tag` module and have to be defined outside your component. Here’s an example of a basic query without variables:

![](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/media/06-1730829567080.webp)

Now let’s try a Query with a variable by simply adding another argument to `useQuery`:

![](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/media/07-1730829582493.webp)

Similarly Draqula uses a `useMutation` hook for mutations:

![](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/media/08-1730829596963.webp)

Just like with queries mutations can also use variables, the difference is you don't add them into `useMutation` and use a `mutate` function instead:

![](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/media/09-1730829613756.webp)

## Rounding it out

Draqula has some additional functions like basic caching and refetching. For example if you previously executed a query with a `page = 1` variable the next time you run the same query with that variable Draqula will return the data last stored for that query. It will also send a refetch request in the background in case it’s outdated. Caching can be turned off for an individual query or globally.

![](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/media/10-1730829627376.webp)

Refetching can also be done manually:

![](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/media/11-1730829645739.webp)

Draqula also has a `fetchMore` function in case your app needs to add more data to the list without deleting current data.

![](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/media/12-1730829664779.webp)

and a merging function if you want to merge new data with the current one

![](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/media/13-1730829679994.webp)

Overall Draqula is a handy little tool that’s quick and easy to use and the developer is still working on adding new features, so give it a try and see for yourself.

Introduction to Draqula - a GraphQL client for React apps

**Progressive Web Apps are the ultimate way to create ultra-fast webpages and apps with a mobile-first approach. Engaging for mobile users, PWAs are also an attractive technology for developers as they leverage modern JS frameworks and tech stack, including GraphQL.**

The story of progressive web apps starts with the PWA manifest announced by Google. In a single document, Google listed all the technical requirements and other things that make Progressive Web Apps reliable, fast and engaging.

Following this list helps developers to build high-quality PWAs step by step, which might be time-consuming and require some knowledge on the edge of web and app development that is not always available in teams.

## Ready-to-use solutions for Progressive Web Apps

The other way is to leverage ready-to-use PWA solutions, which are popping out on the market at breakneck speed. Doing so guarantees a faster time-to-market, a bunch of additional modules and support of development.

There at least several solutions that ensure high-quality progressive web apps, such as Deity Falcon, Scandiweb or Vue Storefront, just to name a few. Apart from these independent solutions, leading CMS and eCommerce platform providers are also working on their own integrated PWA solutions (Magento, SAP Hybris).

Which of them supports [GraphQL](https://graphql.org/)? Here’s the list!

## PWA solutions supporting GraphQL

### [Deity Falcon](https://www.deity.com/)

A PWA solution developed in the offices of The Netherlands-based startup - Deity. It is suitable for all sorts of online sites – webshops, blogs, and bigger platforms.

**Frontend base:** *React*
**Integrated backends:** *Magento 2, Wordpress*
**Technologies inside:** *Node.js, GraphQL, React, Apollo, Koa, Webpack, Jest*
**Projects live:** *2*
**Github stars:** *313*
**Github repo:** [*https://github.com/deity-io/*](https://github.com/deity-io/)

### [PWA Studio](https://magento.github.io/pwa-studio/)

This one is more like a set of tools, rather than a ready-to-use solution. Developed by Magento, one of the leading eCommerce platform solutions, it gives a good base to build PWA solutions adjusted to individual business needs. It is still in its alpha phase, with strong support from the Magento community.

**Frontend base:** *React*
**Integrated backends:** *Magento*
**Technologies inside:** *Webpack, React, Redux, GraphQL*
**Projects live:** *2*
**Github stars:** *420*
**Github repo:** [*https://github.com/magento/pwa-studio*](https://github.com/magento/pwa-studio)

### [Scandiweb PWA](https://scandipwa.com/)

A PWA solution developed by the Scandiweb agency since 2018. The solution provides a progressive web app for Magento-based stores.

**Frontend base:** *React*
**Integrated backends:** *Magento 2*
**Technologies inside:** *Redux, Webpack, React, GraphQL, SCSS*
**Projects live:** *1*
**Github stars:** *35*
**Github repo:** [*https://github.com/scandipwa*](https://github.com/scandipwa)

![](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/media/vuestorefront-1730835136039.webp)

##### Source: Example of building a Query in Vue Storefront

### [Vue Storefront](https://vuestorefront.io)

Probably the fastest-growing open-source PWA solution with strong community support. A PWA solution dedicated to multiple eCommerce platforms with a long list of payment, basket, checkout and other modules crucial to building performant online stores.

**Frontend base:** *Vue.js*
**Integrated backends:** *Magento 1, Magento 2, Shopware, Pimcore, CoreShop, WordPress,EpiServer, SpreeCommerce, Odoo ERP, BigCommerce, boilerplate*
**Technologies inside:** *Vue.js, Node.js, ElasticSearch, Webpack, GraphQL*
**Projects live:** *15+*
**Github stars:** *4903*
**Github repo:** [*https://github.com/vuestorefront/vue-storefront*](https://github.com/vuestorefront/vue-storefront)

***

If you are looking for a more detailed tech comparison, with middleware, server-side rendering, and test tools, there is an excellent summary of [available PWA solutions](https://www.divante.com/blog/pwa-solutions-for-ecommerce-comparison).

Ready-to-use PWA solutions with GraphQL support

Modern frameworks come and go. Some of them manage to become a new standard. With a rise of modern JavaScript libraries like [React](https://react.dev/), new approaches to data fetching like GraphQL APIs are becoming more popular. While [Node.js](https://nodejs.org/en) is still being the most popular technology for [GraphQL](https://graphql.org/) based backend, there are many other options.

If Python is your preferred choice you would be very keen to hear that Django has decent support for [GraphQL](https://graphqleditor.com/). Being more specific [Graphene](https://graphene-python.org/), a product with a goal to ease developers lives by providing a library for building GraphQL APIs. Before we move on let's take a look at how it all has started.

#### The need for a new approach

In the early 2010s, the IT industry had to face a new challenge. The significant rise of mobile usage shown weaknesses of architecture many big social services where data structures take the form of graphs. The significant increase of mobile usage led to many performances some issues with low-powered devices and sloppy networks and the development teams discovered that REST isn’t optimal to deal with this kind of issue.

***"Adapt or die"***

Identifying this as a crucial part of mobile app performance, Facebook started working on a solution to meet their newsfeed's data management requirements, which was later on open-sourced under a name GraphQL.  In parallel, a couple of other companies identified the same problem with their data fetching model. Many of them abandoned their projects after GraphQL was made publicly available and decided to adopt this great tech. Unlike others, Netflix continued to work on their own REST alternative [Falcor](https://github.com/Netflix/falcor), which they decided to open-sourced as well.

#### What's a GraphQL

GraphQL is a query language for APIs. It’s becoming more popular because, unlike to REST, it offers smarter & a lot more elastic data fetching.

Let's take s look at simple GraphQL query:

```ts
query {
  user {
    name
  }
}
```

and a server response it would return:

```ts
{
  "user": {
    "name": "Tomek Poniatowicz",
   }
}
```

Now imagine that you are fetching data for a Facebook feed, where you have a user, posts of that user's friends, comments for those posts made by other users, etc. There is a lot of data that need to be requested, which may lead to over/under-fetching problems in REST. Since GraphQL gives power to the client to fetch the needed data only, nothing slows down, as it's very simple to just add a new field to a query.

#### Django integration for Graphene

We need to install `graphene-django` library and include it in our `settings.py` file

```ts
pip install "graphene-django>=2.0"
```

![](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/media/1.webp)

and set up a GraphQL endpoint in Django app

![](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/media/2.webp)

Now let's prepare a simple Django data model in our `app/models.py` file
and define our schema in `app/schema.py`:

![](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/media/3.webp)
and

![](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/media/4.webp)

and we are all set. Now you can query your simple schema:

![](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/media/5.webp)

#### The main benefits of using GraphQL

There’s a lot of hype on GraphQL and debate on [GraphQL vs REST](https://graphqleditor.com/blog/graphql-vs-rest-performance/).
The main benefit of using GraphQL is the fact that it's way more elastic in terms of fetching data than REST, which results in fewer round-trips to the server. GraphQL makes problems of under & over-fetching disappear.
As GraphQL is in an early stage of adoption, it has some weaknesses (i.e caching), but it's gaining a lot of momentum & becoming a force to reckon.

Getting started with GraphQL in Python

Top new features in Python 3.8

First of all, I want to tell you I created the tool `graphql-zeus` it is GraphQL client on top of the fetch function. What it means? Basically, you point Zeus to the GraphQL schema and it generates libraries for you.

Sounds fun? It is even more fun because you don't have to know `gql` the query language of GraphQL because Zeus provides you with its own GraphQL query like autocompleted syntax.

Create a project folder:

```bash
mkdir zeus-tutorial
cd zeus-tutorial
```

Let's start then. First, you will have to init a new npm package:

```bash
npm init
```

click enter enter enter etc.

Install dev dependencies.

```bash
npm i -D @babel/core @babel/node @babel/preset-env
```

Install dependencies.

```bash
npm i node-fetch
```

Then Create .babelrc file

```bash
echo '{ "presets": ["@babel/preset-env"] }' >> .babelrc
```

Then Create the src directory

```bash
mkdir src
```

and create a `index.js` file

```bash
touch src/index.js
```

Add script to your package.json

```gql
{
  "scripts": {
    "start": "babel-node src/index.js"
  }
}
```

Your whole package.json should look like this:

```gql
{
  "name": "zeustutorial",
  "version": "1.0.0",
  "description": "",
  "main": "main/index.js",
  "scripts": {
    "start": "babel-node src/index.js"
  },
  "author": "Aexol <aexol@aexol.com> (http://aexol.com)",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.5.5",
    "@babel/node": "^7.5.5",
    "@babel/preset-env": "^7.5.5"
  },
  "dependencies": {
    "node-fetch": "^2.6.0"
  }
}
```

Now it is high time to generate some code from GraphQL. Go ahead install `graphql-zeus`.

install `graphql-zeus`

```bash
npm i -g graphql-zeus
```

Generate files from pokemon schema

```bash
zeus https://graphql-pokemon.now.sh/ ./src
```

Hurray! You should have definition files generated in ./src folder.
Now go and open some editor of choice - I prefer VSCode but it is up to you. I can guarantee it works with VSCode though.

Open package directory with editor. Open `src/index.js`
In the first part of the series, we will write simple query loading first ten pokemon names and images and display it in the terminal.

```ts
import { Chain } from './graphql-zeus';

const chain = Chain('https://graphql-pokemon.now.sh');

const run = async () => {
  const { pokemons } = await chain.Query({
    pokemons: [
      {
        first: 10,
      },
      {
        name: true,
        image: 'true',
      },
    ],
  });
  console.log(pokemons);
  return pokemons;
};
run();
```

In zeus everything is typed so when you write `chain.` You should see Query and when you open `{}` parentheses you should see all the possible queries.

In zeus everything is autocompleted so you don't have to learn `gql` syntax.

And run it with being in the project folder

```bash
npm run start
```

You should see the first ten pokemon in the output! Congratulations you've just done your first GraphQL query.

![result](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/result.webp)

## Support

If you want to support me creating `graphql-zeus` visit

[Github Zeus Repo](https://github.com/graphql-editor/graphql-zeus)

and leave a star. That's it.

Communication with GraphQL Server in JS with Pokemon Schema

[GraphQL](https://graphqleditor.com/) is a query language for APIs that was originally built by Facebook, it describes how to ask & fetch the data from the server to the client, what's unique the response format is described in the query and defined by the client rather than the server.

By the end of 2018, the [npm Inc.](https://www.npmjs.com/) published its [annual prediction](https://graphqleditor.com/blog/javascript-predictions-for-2019-by-npm/) about the insights and predictions about JavaScript for 2019, where they mentioned that:

> *There is a strong likelihood that developers will use GraphQL in new projects in 2019 and the GraphQL will become a technical force to reckon in 2019.*

Guess what? They were right! More and more companies are adopting GraphQL with tremendous success!

#### Why Companies are Adopting GraphQL?

The survey made by one of [the GraphQL adopting companies](https://medium.com/novvum/introducing-the-graphql-survey-series-insight-from-successful-graphql-adopters-3a83ff0a7e39) asked the CTOs and lead developers of a variety of companies about their experience with the implementation of [GraphQL](https://graphqleditor.com/) & its results. They made a great job gathering data from both top [companies like Uber, Paypal](https://graphql.org/users/), as well as those with smaller/medium development teams ranging from 1 to 100+ software engineers.

The result of the survey gives us insights on:

* why they have chosen to **implement GraphQL**,
* what **obstacles they faced** during the transition process,
* what **main benefits** they were able to identify after the successful implementation.

Let's take a look at the questions the developers had to face.

#### Questions & answers

Well, technically these are not questions, but the survey asked responders to rank reasons why they decided to pivot in a scale from 1–6, where 1 is most important reason & 6 is least important. The makers of the survey identified six main benefits (*Development Velocity, Modularity, Scalability, Performance, Reliability, Security*), and asked how strongly they agree/disagree with the following statements:

> *We were able to speed up our development using GraphQLWe were able to scale our projects faster with GraphQLIt was easier to unify our APIs (e.g., Microservices, legacy endpoints, third-party services, etc.)There has been an increase in performance using GraphQLOur architecture is more stable, with decreased downtime, and fewer errors*

Here are the results:

![Chart presenting why companies adopted GraphQL](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/why-1730847062681.webp)

![Chart presenting benefits of implementing GraphQL](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/benefits-1730847065446.webp)

###### Source: [Movvum @medium](https://medium.com/novvum/why-companies-of-various-sizes-chose-graphql-and-what-they-experienced-7a9d47d06bee)

The interpretation of the survey's results was summed up closed in the table below. The most important thought is that GraphQL managed to provide what teams were looking for that small to medium as well as large enterprise teams.

| Team size          | What they wanted to achieve                                     | What they've achived                      |
| ------------------ | --------------------------------------------------------------- | ----------------------------------------- |
| 50-100 & 100+ devs | Faster development speed, better scalability, better modularity | Faster development, better scalability    |
| 10-50 devs         | Better modularity, higher performance                           | Faster development, better infrastructure |
| up to 10 devs      | Faster development, better modularity                           | Faster development, better scalability    |

#### Bonus: Get inspired!

If somehow you haven't seen it make sure to check out the documentary about the GraphQL origins and how it became what it is now. A great production starring co-creators of GraphQL: Lee Byron, Dan Schafer, and Nick Schrock as well as other big names from the community.

> *GraphQL: The Documentary" explores the story of why and how GraphQL came to be and the impact it's having on big tech companies worldwide, including Facebook, Twitter, Airbnb & Github.*

[https://www.youtube.com/watch?v=783ccP\_\_No8](https://www.youtube.com/watch?v=783ccP__No8)

Why development teams are adopting GraphQL?

There has been a lot of buzz in the web development world around GraphQL lately and for good reason!

[GraphQL](https://graphql.org/) is a new query language for APIs and a server-side runtime for executing queries by using a **type system** you define for the data, so basically a syntax that describes how to ask for data and load it from a server to a client.

## Why all the buzz?

The answer is simple:

> It's all about **the development speed**.

The main reason why companies started using GraphQL is that it promises to speed up your API development, what's more, it manages to deliver!

In of the [surveys](https://medium.com/novvum/introducing-the-graphql-survey-series-insight-from-successful-graphql-adopters-3a83ff0a7e39?) directed to CTOs and lead developers of a variety of teams ranging from 1 to 100+ engineers (among which we can find tech giants like Uber or Paypal) about their perception of GraphQL implementation in their teams almost all companies felt GraphQL delivered on their expectations.

Let me introduce you three useful GrapphQL code generators to speed your development:

### 1. [GraphQL Zeus](/docs/zeus)

> [Zeus](https://github.com/graphql-editor/graphql-zeus)*, son of Kronos, father of* [Apollo](https://www.apollographql.com/)*.*

A simple tool working in [Node.js](https://nodejs.org/en) & browser to generate an auto-complete client library for Javascript or Typescript. The unique thing about [GraphQL Zeus](/docs/zeus) is that it creates its own specification along with type-safe completion of request & responses.

![[graphql-zeus](/docs/zeus) logo](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/zeus-1730852450303.webp)

### 2. Prisma GraphQLGen

The tool from Prisma team provides a type-safe environment which helps maintain confidence about your code. As creators mention the motivation behind it was to

> *"(...) leverage the strongly typed GraphQL schema with the goal of making your backend type-safe while reducing the need to write boilerplate through code generation".*

The `graphqlgen` generates & scaffolds type-safe resolvers based on your GraphQL Schema in TypeScript & Flow.

[![GraphQLGen logo](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/prismacodegen-1730852443632.webp)](https://github.com/prisma-labs/graphqlgen)

### 3. GraphQL Code Generator

[GraphQL Code Generator](https://the-guild.dev/graphql/codegen) is a tool that generates code out of your GraphQL schema, supporting custom plugins & templates, so regardless of the language that you're using (*i.e. TypeScript, React, Angular*) GraphQL Code Generator will be a huge help.

[![GraphQL Code Generator logo](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/gqlcodegenerator-1730852435534.webp)](https://the-guild.dev/graphql/codegen)

Top 3 GraphQL code generators

[Schema](https://graphqleditor.com/blog/graphql-schemas-and-types-part-1/) is the most important part of any [GraphQL](https://graphql.org/learn/) implementation. Schema is a centerpiece of any GraphQL service and defines the data-sets that can be queried by the client.

#### What's a schema stitching?

Imagine having a project where multiple teams are involved in each team:

* handles different aspects crucial to that service,
* has to work on the schema to make sure that their part of the project would work as expected,
* must make sure that everything would work properly as a whole.

Cooperating on a huge project schema might be confusing...

![](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/media/github-1730815447197.webp)

###### A piece of [GitHub's schema](https://developer.github.com/v4/) containing 9182 lines of code in total!

Schema stitching is a process of merging multiple GraphQL schemas into one that can be queried. It’s an incredibly useful approach when it comes to building projects that require having both, unified & transparent access to a data split across multiple APIs (even without understanding where exactly it’s located). It can be also used to customize an existing GraphQL API like adding custom resolvers or overriding existing ones of third-party [GraphQL service](https://graphqleditor.com/) or adding more fields to an existing type whose data comes from another data source.

![](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/media/two-schemas-1730815459047.webp)

#### Performing a schema stitching can cause troubles

Although putting two schemas into one in a way where there are no name collisions seems quite simple, but that's not a real schema stitching. What we want to achieve is one consistent schema, merged from multiple underlying GraphQL APIs. That's a way more difficult, but what if a told you that there is an app for that?

#### A better way

The latest release of [GraphQL Editor](https://graphqleditor.com/) introduced an easy way to collaborate on schemas. All we need to do is:

**1. Add two or more schemas to our account - you can load them from URL or .gql file**

![](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/media/import-schema-1730815554170.webp)

**2. Initiate a new project**![](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/media/create-new-project-1730815587585.webp)


**3. Pick schemas we want to have access to in our newly generated schema from the list & create a project**![](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/media/stitch-1730815612134.webp)


... **and that's it!**

As long as we have managed to avoid conflicts between our underlying schemas, we should have access to all their elements in our newly generated project 👌![](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/media/access-in-new-schema-1730815634894.webp)

A better way to stitch GraphQL schemas

[GraphQL](https://graphql.org/) is a query language for APIs. It's becoming more popular because of the many benefits it offers compared to REST APIs, of which the most important one is smarter data fetching.

The querying model offered by GraphQL is showing its real power when it comes to working with large APIs.

## GraphQL vs REST

GraphQL allows to specify what data we need in a query and that's what's going to be included in a response – nothing more, nothing less, just the data we asked for in a single request. On the other hand, when fetching for the same data with REST we would end up with multiple REST roundtrips ...

![](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/media/graphqlvsrest-1730810161782.webp)

###### Source: [blog.apollographql.com](https://www.apollographql.com/blog/graphql/basics/graphql-vs-rest)

... or imagine it this way:

![](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/media/graphqlcity-1730810172244.webp)

###### Source: [crystallize.com](https://crystallize.com/comics/rest-vs-graphql)

## GraphQL in Postman

[Postman](https://www.postman.com/) joins the group of companies acknowledging the GraphQL qualities and has recently [announced the support for GraphQL](https://blog.postman.com/postman-v7-2-supports-graphql/) in their service. The latest release of Postman v7.2 enables:

* sending GraphQL queries in the request body,
* GraphQL variables,
* GraphQL query autocompletion.

This is a great complement to the previous update which introduced schema support, all that combined makes it possible to create & store GraphQL schemas directly in Postman itself!

![](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/media/graphqlpostman-1730810188004.webp)

###### Source: [blog.postman.com](https://blog.postman.com/postman-v7-2-supports-graphql/)

Postman now supports GraphQL!

Developing APIs has always been a crucial task for any project. A well-designed API must be flexible and scalable as it always evolves with time. The urge for improvements led to the explosive growth of the data graphs popularity in the last years. This is great news for GraphQL as a lot of companies have started adopting it in their projects. To not be groundless:

* **Audi's e-tron car** with a data graph
* The front page of **NY Times** is based on a data graph
* **Airbnb** uses data graph across all their apps both web & mobile

... the list goes on and on.

## The benefits of data graph

Graphs are everywhere! So what are the main benefits of the data graph structure? First of all, it provides easier access to the date, by better, more clear structure.

![](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/media/datagraphs-1730830434388.webp)

This leads to another huge benefit of using data graphs which is a better data understanding which effect in faster project onboarding and more efficient collaborations overall as we can clearly see a cause-effect relation. It's worth mentioning that graph structures are a lot easier to visualize, especially with modern tooling available on the **data graph/GraphQL** market like [GraphQL Birdseye](https://github.com/Novvum/graphql-birdseye) or [GraphQL Editor](https://graphqleditor.com/).

The benefits don’t stop there and go further beyond to faster development, higher code automation, more consistent user experiences across multiple apps and a lot more.

## A bright future

There is no doubt that people in [Apollo](https://www.apollographql.com/), the most popular GraphQL implementation, fully understand the benefits of the data graph structure. Fortunately, more and more people start to see qualities offered by data graphs. Recently, the big news has seen the daylight, the information that ["Apollo raised $22 million"](https://www.businesswire.com/news/home/20190612005247/en/Apollo-Raises-22-Million-Give-GraphQL-based-Data), this shows that also VCs' noticed a business opportunity in GraphQL technology which gives more confidence that GraphQL might be the future of APIs. What do you think?

![](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/media/apollo-1730830446881.webp)

Blog