Что такое GraphQL

GraphQL — язык запросов с открытым исходным кодом, разработанный Facebook. Создавался он как более удобная альтернатива REST API. На данный момент GraphQL успешно покоряет популярные сервисы и компании, такие как GitHub, Pinterest, Twitter, Sky, The New York Times, Shopify, Yelp. GraphQL используется и на моём блоге, в момент генерации статического контента из markdown-файлов. GraphQL повсеместно используют так называемые Headless CMS, для доставки контента в конечную точку.

Основные преимущества GraphQL:

  • Единая точка входа;
  • Декларативная типизация данных, с которыми работает клиент;
  • Клиент получает только данные, которые он запросил и ничего лишнего;
  • Клиент может гибко управлять структурой получаемых данных;
  • Интерфейс GraphQL не завязан на источник данных и мы можем получать данные из разных источников, ничего не изменяя в нашей схеме;
  • В любой момент клиент может получить свежую схему запрашиваемых данных;

В GraphQL задается единая точка, к которой обычно обращаются через метод POST. Вся информация, необходимая для взаимодействия с GraphQL содержится в теле запроса. Обычно на откуп фронтендерам дается песочница, где они могут вдоволь потренироваться. Выглядит запрос так (на примере GitHub GraphQL):

query { 
  viewer {
    id
    name
    login
  }
}

Авторизуйтесь в песочнице GitHub GraphQL и введите указанный запрос в поле слева. Запустите запрос кнопкой с треугольником. Вы получите примерно следующие данные:

{
  "data": {
    "viewer": {
      "id": "MDQ6VYNlciUyMzgxNzk=",
      "name": "Zorca Orcinus",
      "login": "zorca"
    }
  }
}

Прекрасно! Мы сделали первый запрос на языке GraphQL. В чем же особенность? Сравним REST API и GraphQL на том же самом GitHub при помощи другого практического примера.

Отличия GraphQL от REST API на практике (первое приближение)

Задача: Получить первые три репозитория пользователя GitHub c логином mihdan. Из данных нас интересуют только: название репозитория, описание и ссылка на него.

Решение при помощи REST API: Отправляем простой запрос методом GET, указав GET параметр: per_page=3.

https://api.github.com/users/mihdan/repos?per_page=3

На выходе мы получим полную информацию о трех репозиториях. Информация очень объемна, избавиться от нее в ответе невозможно.

Решение при помощи GraphQL: Отправляем через песочницу следующий запрос:

query { 
  user(login: "mihdan") {
    repositories(first: 3) {
      nodes {
        name
        description
        url
      }
    }
  }
}

Да, сама структура запроса выглядит тяжеловесной в противовес простому URL REST API. Но что же мы увидим в ответе? Только то, что нам необходимо, по максимум сократив количество мусорной информации:

{
  "data": {
    "user": {
      "repositories": {
        "nodes": [
          {
            "name": "Editplus-Theme-for-Sublime-Text-2",
            "description": "Цветовые темы для IDE",
            "url": "https://github.com/mihdan/Editplus-Theme-for-Sublime-Text-2"
          },
          {
            "name": "html5-boilerplate",
            "description": "A professional front-end template for building fast, robust, and adaptable web apps or sites.",
            "url": "https://github.com/mihdan/html5-boilerplate"
          },
          {
            "name": "php5-akismet",
            "description": "A PHP class that enables you use the Akismet anti-spam service in your PHP5 application.",
            "url": "https://github.com/mihdan/php5-akismet"
          }
        ]
      }
    }
  }
}

В следующей части детально рассмотрим отличия GraphQL от REST API и попробуем определить победителя этой битвы.