[Ghost](https://ghost.org/) is a very popular open-source publishing platform, described by many as a modern alternative to WordPress. Their premise is making publishing as easy as possible and they do deliver!

Ghost has proven its usability by gaining the trust of such tech giants like [Mozilla](https://www.mozilla.org), [OpenAI](https://openai.com/), [Apple](https://www.apple.com/), [Tinder](https://tinder.com/), [DuckDuckGo](https://duckduckgo.com/) and thousands of small & medium companies.

A week ago big news hit the Internet that the new version of Ghost is available and I think that the release timing wasn't a coincidence ... **Happy Halloween ;)**

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

As mentioned by its developers, [Ghost 3.0](https://ghost.org/) is all about enabling new business models for publishers.

#### Ghost 3.0 features:

* **Native support for memberships** - allowing you to easily turn your anonymous page viewers into registered users,
* **Stripe integration** - to enable subscription business model for all publishers (Ghost takes 0% transaction fees!)
* **JAMstack native architecture** - documented integrations with [Gatsby](https://www.gatsbyjs.com/), [Next](https://nextjs.org/), [VuePress](https://vuepress.vuejs.org/), and more.
* **many new integrations** - you can use your favorite services with Ghost, the full list is available [here](https://ghost.org/integrations/)
* and of course, it remains **an open-source platform**!

If that's not enough and you are still hesitating if you should give Ghost a try it is also worth mentioning that:

* has blazing-fast & modern codebase,
* fully open-source permissive **MIT license**,
* much **cheaper than WordPress** (see below)

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

###### Source: [ghost.org](https://ghost.org/vs/wordpress/)

#### Ghost + Gatsby (GraphQL)

One of my favorite things about Ghost is that it works great with [Gatsby](https://www.gatsbyjs.com/) & Gatsby equals [GraphQL](https://www.gatsbyjs.com/docs/conceptual/graphql-concepts/). GraphQL is a query language for APIs where when you ask for data you get exactly what you need - nothing more, nothing less. This how it looks compared to REST.

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

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

Fetching data from the Ghost API for a Gatsby site is very simple, especially when using GraphQL. Let's take a look at some basic operations that can be done to retrieve data from the Ghost API with GraphQL.
Take a look at these common examples of operation you probably need to perform when using GraphQL to query the Ghost API for your company page, news site or blog. All examples come from [Ghost docs](https://ghost.org/docs/content-api/).

#### Fetching posts

In this example, we take a limited amount of posts per page & use ‘skip’ to paginate through pages containing those posts:

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

###### Source: [ghost.org](https://ghost.org/docs/content-api/)

#### Filtering Posts

Filtering posts by tag is a widely used case:

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

###### Source: [ghost.org](https://ghost.org/docs/content-api/)

#### Retrieving settings

The Ghost settings node differs from other nodes (it’s a single object). To query it you need to:

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

###### Source: [ghost.org](https://ghost.org/docs/content-api/)

#### Retrieving the list of all tags

Getting all tags from a Ghost site is simple. You could them to form a tag cloud or a keywords list:

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

###### Source: [ghost.org](https://ghost.org/docs/content-api/)

New Ghost 3.0 and how to use it with GraphQL (Gatsby)


Since open-sourcing [GraphQL](https://graphql.org/) specification in 2015, it gained a lot of popularity and is now used by many development teams, including giants like GitHub, Twitter or Airbnb. Why? Because GraphQL lets you describe the complex data dependencies with ease, another great thing about it is that you can use it with any language or platform.

The rising popularity of GraphQL led to the formation of local meetups of GraphQL users. One of the most active European communities is a group of GraphQL fans from Berlin. If you are not from Berlin or subscribing [GraphQL Weekly](https://www.graphqlweekly.com/) (if so it's a good moment to do it), you might have missed the recordings of their recent meetup that took place at Berlin [Prisma](https://www.prisma.io/) office.

## The talks from GraphQL Berlin Meetup #15

#### "System Design and Architecture @ GraphQL" by Bogdan Nedelcu

Designing GraphQL API's for scale is quite a challenge as GraphQL is relatively a new technology. Bogdan Nedelcu talked about system architecture patterns that have been around for a long time that GraphQL bases on.

https://www.youtube.com/watch?v=S22rYsesrQc

#### "Pursuing Singularity" by Roman Paradeev

During his talk, Roman Paradeev made an overview of tools that provide type safety across your database, API & client-side in the GraphQL ecosystem.

https://www.youtube.com/watch?v=yN8NBXdRRfc

#### "Key learnings from implementing authentication and authorization using GraphQL" by Christoph Hartmann

Basing on his experience with GraphQL implementation Christoph Hartmann presented different approaches to implementing authentication and authorization for GraphQL services.

https://www.youtube.com/watch?v=pF6SH7Tm6Pc


Inspiring talks from GraphQL Berlin Meetup

Some time ago I have read that:

> *GraphQL is really about collaboration, and the teams that get furthest are those who work closely together on their GraphQL API.*

This idea is very true but collaboration becomes a very tricky part of any development project where there are multiple teams involved. So a question arises, is there any way to make collaboration on a GraphQL API easier & more pleasant experience? I think that it's possible!

Let me introduce you three ways of strengthening your GraphQL API which might save your teams from jumping at each other's throats.

### #1 Install GraphQL Code Inspector

[GraphQL Inspector](https://the-guild.dev/graphql/inspector) is a CLI tool from [The Guild](https://medium.com/the-guild) member [Kamil Kisiela](https://github.com/kamilkisiela/), that detects changes, similar or duplicated types, validates documents against a schema and looks for deprecated usage, everything as simple as this:

```ts
$ graphql-inspector diff OLD_SCHEMA NEW_SCHEMA
```

There is also a programmatic API available in case you want to build something on top of it on your own.

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

##### Source: [GraphQL Inspector](https://medium.com/the-guild/graphql-inspector-481c1a5ef616)

### #2 Use GraphQL Editor

The [GraphQL Editor](https://graphqleditor.com/) is a tool to build, manage and collaborate on your GraphQL schema visually! It includes features that help you make sure that your GraphQL API and its clients are well-developed. The latest update introduced a couple more interesting features like:

* **Autocomplete for Queries** - Create an auto-complete library for JavaScript or TypeScript with a built-in [[GraphQL Zeus](/docs/zeus)](https://github.com/graphql-editor/graphql-zeus) feature.
* **Schema versioning** - with a click of a button you can see & manage all changes.
* **Schema Libraries (Schema stitching done right)** - built-in GraphQL libraries allow you to create new GraphQL schemas from multiple underlying GraphQL APIs.
* **Fake backend** - allowing you to run a GraphQL Server with faked data available for testing with a single click.

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

### #3 Why not use both?

Get your GraphQL API a bulletproof vest by combining these two tools!

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

 3 ways of strengthening your GraphQL API

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)

Blog