TL;DR

• GraphQL is a modern query language and a runtime for APIs, widely seen as a successor to REST APIs.
• GraphQL is built around the concept of “get exactly what you asked for”, without any under fetching or over fetching of data.
• GraphQL makes it easier to aggregate data from multiple sources, and uses a type system to describe data rather than multiple endpoints.
• The GraphQL Landscape shows an aggregated GraphQL adoption table covering over 116k stars, a market cap of $4.7 trillion, and a funding of over $9 billion.
• The team at Honeypot filmed a documentary on the history and emergence of GraphQL that can be viewed on YouTube.

What is GraphQL?

Quite simply put, GraphQL is a query language for APIs and a runtime for fulfilling those queries with existing data. GraphQL provides a complete and understandable description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools.

GraphQL supports reading, writing (mutating), and subscribing to changes to data (realtime updates – most commonly implemented using WebHooks). GraphQL servers are available for multiple languages, including Haskell, JavaScript, Perl, Python, Ruby, Java, C++, C#, Scala, Go, Erlang, PHP, and R.

The attraction for GraphQL is primarily based on the concept of asking for what you need, and receiving just that - nothing more, nothing less. When sending queries to your API, GraphQL returns a very predictable result, without any over fetching or under fetching, ensuring that apps using GraphQL are fast, stable, and scalable.

To visualise how this would look, let’s use the GraphCMS website as an example (disclaimer, I work there) and take a look at the posts on the GraphCMS Academy by running a query asking for just the titles of articles.

The query would look similar to this:

{
  academyPosts {
    title
  }
}

From here we can infer that we’re just asking for the title of Academy posts, and nothing else. Therefore, the results returned would be:

{
  "data": {
    "academyPosts": [
      {
        "title": "Headless Mobile Content Management System (Mobile CMS)"
      },
      {
        "title": "What is Content as a Service (Caas)"
      },
      {
        "title": "Headless CMS and SEO Best Practices"
      },
      {
        "title": "What Is A Headless CMS?"
      },
      {
        "title": "Understanding Digital Experience Platforms (DXP) and Headless CMS"
      },
      {
        "title": "Understanding the Content Mesh and how a Headless CMS fits in."
      },
      {
        "title": "The Era of Application Content"
      },
      {
        "title": "Best Practices for Headless Content Modelling"
      },
      {
        "title": "Choosing the best Headless CMS"
      },
      {
        "title": "What is GraphQL?"
      },
      {
        "title": "Choosing a Headless CMS for Content Creators"
      },
      {
        "title": "Selecting a Headless CMS - a Checklist"
      },
      {
        "title": "What is a DXP (Digital Experience Platform)?"
      },
      {
        "title": "What is the JAMStack?"
      }
    ]
  }
}

On such a simple request its easy to highlight how the payload would be minimal. However, GraphQL queries access not just the fields of a single resource, but also follow references between them. While typical REST APIs require loading from multiple URLs, GraphQL APIs get all the data in a single request - making apps quick even on slow mobile network connections.

To visualise this, let’s try a more complex request where we want to see a list of blog posts on GraphCMS, but rather than just the postTitle, also get the authors these posts are related to, the slugs of the posts, and the categories these blog posts fall under.

#graphql #headless-cms #api #rest-api #e-commerce #graphql-api #backend #database