Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

1 Это руководство по GraphQL. Из него вы узнаете базовую теорию, а также научитесь писать простые запросы с помощью GraphQL.

2 <h2>Содержание</h2>

3 <ul><li><a>Что такое GraphQL: теоретический ликбез</a></li>

4 <li><a>Query: запросы в GraphQL</a></li>

5 <li><a>Mutation: мутации в GraphQL</a></li>

6 <li><a>Subscription: подписки в GraphQL</a></li>

7 <li><a>Как работать с сервером GraphQL</a></li>

8 <li><a>REST vs. GraphQL</a></li>

9 <li><a>Заключение</a></li>

10 </ul><h2>Что такое GraphQL: теоретический ликбез</h2>

11 Прежде чем рассматривать GraphQL, давайте уделим внимание исторической базе. Что такое SQL - structured query language или язык структурированных запросов?

12 SQL - декларативный язык программирования, который применяется для создания, изменения и управления данными в базах данных. Этот язык поддерживает четыре базовых оператора запросов: SELECT, INSERT, UPDATE и DELETE. С помощью SQL мы можем запросить из базы данных (БД) именно то, что нам необходимо.

13 Например, когда необходимо "достать" из БД всех пользователей с именем Maria, это можно сделать с помощью запроса:

14 Решить эту задачу с помощью REST можно несколькими способами:

15 <ol><li>Определить endpoint на сервере, который будет отдавать из базы данных пользователей с fname Maria.</li>

16 <li>Определить общий endpoint для получения всех пользователей и фильтровать полученный список на стороне клиента.</li>

17 </ol>При этом в каждом из вариантов есть свои минусы. Первый подход нельзя масштабировать, так как нет возможности создать endpoint для каждого пользователя. Если мы используем второй подход, повышается нагрузка на сеть, а также появляется необходимость в постобработке на стороне клиента.

18 А теперь представьте инструмент, который объединяет возможности SQL и REST на стороне клиента. Вы уже догадались, что он называется GraphQL. Этот инструмент берёт идеи, разработанные для манипуляции данными в БД, и использует их в вебе. Поэтому с помощью одного запроса GraphQL можно получить сразу все необходимые данные.

19 Ниже представлена информация, необходимая для начала работы с GraphQL.

20 <h2>Query: запросы в GraphQL</h2>

21 С помощью запросов GraphQL получает необходимые данные с сервера. Тип запроса Query в GraphQL - аналог GET в REST. Запросы - строки, которые отправляются в теле HTTP POST-запроса.

22 Примечание - Обратите внимание, все типы запросов в GraphQL отправляются через POST.

23 Query описывает данные, которые необходимо получить с сервера. Например, с помощью кода ниже можно получить fname и age всех пользователей в базе данных.

24 В ответ на этот запрос сервер присылает данные в формате JSON. Структура ответа соответствует структуре запроса.

25 Успешные операции возвращают JSON с ключом "data" и с ключом "error", а неуспешные возвращают JSON с ключом и сообщением об ошибке. Благодаря этому удобно обрабатывать ошибки на стороне клиента.

26 <h2>Mutation: мутации в GraphQL</h2>

27 Mutation - ещё один root types. С его помощью можно добавлять данные в БД. Mutation - аналог POST и PUT в REST. Ниже пример кода.

28 Здесь создаётся мутация createUser, которая добавляет в БД пользователя с fname Richie и age 22. В ответ на этот запрос сервер присылает JSON с id записи. Ответ выглядит так:

29 <h2>Subscription: подписки в GraphQL</h2>

30 Subscription - третий тип операций в GraphQL. С его помощью клиент слушает изменения в БД в режиме реального времени. Под капотом подписки используют вебсокеты. Пример кода:

31 С помощью этого запроса можно получать список пользователей с именами и количеством лайков каждый раз, когда оно меняется.

32 Например, когда пользователь с fname Richie получает лайк, ответ будет таким:

33 Подобный запрос можно использовать для обновления количества лайков в режиме реального времени в соответствующем интерфейсе, например, в форме с результатами голосования на сайте.

34 Выше представлены три основных типа запросов в GraphQL. Несмотря на поверхностное знакомство, вы получили достаточно знаний, чтобы начать работать со схемой GraphQL.

35 <h2>Как работать с сервером GraphQL</h2>

36 Рассмотрим ответ на этот вопрос на конкретном примере.

37 Цель: настроить сервер GraphQL, который отвечает на три типа запросов к БД NoSQL, в которой есть список пользователей с такой структурой:

38 Также в базе данных есть списки постов, которые опубликовали пользователи.

39 Для дальнейшей работы понадобится<a>сервер Apollo</a>. Это сервер GraphQL с открытым исходным кодом.

40 Настройте проект и установите зависимости:

41 Вы создали пустой проект. Теперь установите GraphQL, Apollo и nodemon для отслеживания изменений в файлах.

42 Чтобы nodemon работал, добавьте в package.json запись:

43 "scripts": "start": "nodemon -e js, json, graphql"

44 <h3>База данных</h3>

45 Данные в этом примере поместим в переменную JSON. В реальных проектах данные обычно хранятся в БД. В тестовом проекте данные хранятся в index.js. Вот они:

46 Теперь можно перейти к работе с сервером GraphQL.

47 <h3>Схема</h3>

48 Работа с сервером GraphQL всегда начинается с разработки схемы (Schema). Она состоит из двух взаимосвязанных объектов: TypeDefs и Resolvers.

49 Выше были описаны основные типы GraphQL. Чтобы сервер мог с ними работать, эти типы необходимо определить. Объект typeDef определяет список типов, которые доступны в проекте. Код выглядит так:

50 В примере выше определяется тип User, в котором указываются fname, age, likes и другие данные. Для каждого поля определяется тип данных: String или Int. GraphQL поддерживает четыре типа данных: String, Int, Float, Boolean. Если в поле указан восклицательный знак, оно становится обязательным.

51 Также в примере выше определяются типы Query,Mutation и Subscription.

52 Первый тип, который содержит внутри себя тип Query, называется users. Он принимает id и возвращает объект с данными соответствующего пользователя. Это обязательное поле. Ещё один тип Query называется posts. Он устроен так же, как users.

53 Тип Mutation называется incrementLike. Он принимает параметр fname и возвращает список пользователей.

54 Тип Subscription называется listenLikes. Он возвращает список пользователей.

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

56 <blockquote><h3>Также полезно</h3>

57 <a>Когда Gatsby заменит WordPress</a>: интервью с GraphQL-гуру Михаилом Новиковым.

58 </blockquote><h3>Resolver</h3>

59 Resolver или распознаватель - функция, которая возвращает данные для определённого поля. Resolver’ы возвращают данные того типа, который определён в схеме. Распознаватели могут быть асинхронными. С их помощью можно получать данные из REST API, базы данных или другого источника.

60 Определим Resolver’ы:

61 В примере выше есть шесть функций:

62 <ul><li>запрос users возвращает объект пользователя, соответствующий переданному id;</li>

63 <li>запрос posts возвращает объект поста, соответствующий переданному id;</li>

64 <li>в поле posts User распознаватель принимает данные пользователя и возвращает список его постов;</li>

65 <li>в поле user Posts функция принимает данные поста и возвращает пользователя, который опубликовал пост;</li>

66 <li>мутация incrementLike изменяет объект users: увеличивает количество likes для пользователя с соответствующим fname. После этого users публикуются в pubsub с названием LIKES;</li>

67 <li>подписка listenLikes слушает LIKES и отвечает при обновлении pubsub.</li>

68 </ul>Два слова о pubsub. Этот инструмент представляет собой систему передачи информации в режиме реального времени с использованием вебсокетов. pubsub удобно использовать, так как всё, что касается вебсокетов, вынесено в отдельные абстракции.

69 Итак, работа с типами и распознавателями завершена. Теперь можно запустить сервер.

70 Запускаем сервер

71 Откройте<a>http://localhost:4000/</a>в браузере. Благодаря Apollo вы можете полноценно протестировать сервер GraphQL.

72 Потратили 15 минут на настройку сервера и, вуаля, написали первый запрос. Полная версия кода опубликована<a>здесь</a>.

73 <h2>REST vs. GraphQL</h2>

74 Что делать, если нам нужно найти пользователя, который опубликовал пост с id x? Рассмотрим, как эта задача решается с помощью REST. Вот данные:

75 Сначала необходимо определить endpoint’ы GET:

76 Когда необходимо получить данные о пользователе, который опубликовал пост с id 1, запрос выглядит так:

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

78 Что делать, если нужно получить только имя пользователя? Конечно, можно использовать данные поля fname. Но мы уже получили дополнительные данные: id, likes, age. Операция становится слишком дорогой.

79 Можно попробовать использовать endpoint, который получает только данные из поля fname:

80 Это решает проблему. Но сложность в том, что вам придётся создавать endpoint для каждого типа информации. Это неудобно.

81 Давайте посмотрим, как можно решить задачу с помощью GraphQL. Всё, что вам требуется - простой запрос:

82 Если нужно получить age пользователя, который опубликовал пост с id 1, запрос будет таким:

83 Поле user в запросе определено в схеме. Поэтому вы можете получать нужную информацию без использования endpoint’ов и повторных обращений к серверу.

84 <h2>Заключение</h2>

85 В руководстве рассмотрена базовая информация о GraphQL: краткая теория, типы, отличия от REST. В комментариях можно поделиться впечатлениями о GraphQL и опытом применения этого инструмента.

86 Адаптированный перевод статьи<a>So, What the Heck is GraphQL</a>by Karthik Kalyanaraman. Мнение автора оригинальной публикации может не совпадать с мнением администрации "Хекслета".