GraphQL

На смену web-приложенями, которые генерировали шаблоны на сервере и отправляли в браузер готовый html, а также базировались на концепции MVC пришли frontend фреймворки и отвоевали уже довольно крупную часть рынка. Чтобы получать данные с сервера они использовуют REST API. При активном использовании последнего начали отчетливее вырисовываться его ограничения.

GraphQL – это новый язык запросов для API, разработанный в Facebook. Является более эффективной, мощной и гибкой альтернативой REST. Но по сути это только спецификация (синтаксис), которая может иметь массу реализаций.

Проблемы

Какие же проблемы призван решить новый инструмент? Давайте представим ситуацию, когда нужно отобразить список заметок (posts) и  под каждым опубликовать список комментариев (comments) с именами пользователей и аватарами. При REST-подходе нужно будет изменить API posts таким образом, чтобы результат сорержал и comments с вложенными в них объектми, описывающими пользователей (user).

Но если в каком-то месте приложения вам нужно будет поллучить список заметок без комметарией, чтобы не нагружать систему, то придется заводить второй endpoint для posts.

Также можно себе представить более сложную структуру, где данных больше и грузить их нужно с разных источников (например, Mysql и Redis). И тогда будет примерно понятно с какими проблемами сейчас сталкивается подход REST.

Что нужно чтобы работать с GraphQL

Чтобы начать работать с GraphQL нужна серверная библиотека, которая будет обрабатывать запросы и клиентская библиотека, которая их будет посылать, а также обрабатывать ответы.

Основные комоненты

Важные вещи на которых основана работа GraphQL:

• Схемы (schemas) – определяют и структурируют данные, которые можно получать
• Запросы (queries) – представляются собой описание обращений за данными
• Мутации (mutations) – части схемы и запросы, которые позволяют управлять данными (добавлять, удалять, изменять)
• Резольверы (resolvers) – производят выборку данных для каждого поля

Попробуем что-нибудь простое

Чтобы пощупать это руками есть специальная игровая площадка Launchpad, the GraphQL server demo platform. Там есть ряд интерактивных примеров. В специальном браузероном редакторе со всплывающими умными подсказками можно составлять запросы и смотреть что получается. Hello World там совсем простой. После него можно сразу же перейти к примеру Relational data: Authors and posts. Можем взглянуть на него.

typeDefs описывает типы (type Author и type Post). У автора мы видим вложенный массив posts:

type Author {
  id: Int!
  firstName: String
  lastName: String
  posts: [Post] # the list of Posts by this author
}

Ниже описана схема, которая позволяет делать запросы:

# the schema allows the following query:
type Query {
  posts: [Post]
  author(id: Int!): Author
}

И схема, которая позволяет делать мутации

# this schema allows the following mutation:
type Mutation {
  upvotePost (
    postId: Int!
  ): Post
}

Ниже описаны резольверы resolvers, которые производять всю работу. В примере данные хранятся в JS объектах и массивах, поэтому в resolvers мы видим работу с этими данными через JS.

Попробуем выполнить запрос получив посты одного из авторов:

# Запрос
query PostsForAuthor {
  author(id: 2) {
    firstName
    posts {
      title
      votes
    }
  }
}

# Результат
{
  "data": {
    "author": {
      "firstName": "Sashko",
      "posts": [
        {
          "title": "Welcome to Apollo",
          "votes": 5
        },
        {
          "title": "Advanced GraphQL",
          "votes": 1
        }
      ]
    }
  }
}

В запросе мы можем убрать получение ненужных полей или что-то еще. И посмотреть как меняется результат.

Попробуем применить мутацию:

mutation { upvotePost(postId: 2) {
    id,
    title,
    votes
  }
}

Выполняя этот запрос раз за разом можно смотреть как votes увеличивается

{
  "data": {
    "upvotePost": {
      "id": 2,
      "title": "Welcome to Apollo",
      "votes": 8
    }
  }
}

Попробовтаь в реальном проекте

Чтобы задействовать GraphQL в чем-то реальном необходимы библиотеки, которые реализуют данный стандарт. Нужна серверная и клиентская части. Есть различные каталоги ссылок на реализации для разных языков и фреймворков. Например, Awesome GraphQL. Там есть ссылки на интеграции для React, Vue, Angular, Laravel и еще массы прочих.

Что еще умеет GraphQL

Из того, что ухватил в коротком знакомстве есть, например, поддержка веб-сокетов, чтобы можно было узнать об изменении данных на сервере без обращения клиента. Это называется подписки.

Есть жадная загрузка зависимых моделей (eager loading). При запросе  множества ресурсов, которые имеют вложенные ресурсы, чтобы избежать создания отдельного запроса по получению вложенных сущностей для каждой сущности верхнего уровня, используется жадная загрузка, которая загружает вложенные ресурсы за 1 запрос.

Полезные ссылки

• Что же такое этот GraphQL
• Что такое GraphQL?
• 5 причин, по которым вам не стоит использовать GraphQL
• Пример создания GraphQL API на Laravel часть 1 и часть 2
• GraphQL basics and practical examples with Vue