Это вторая часть из пяти вводных статей о GraphQL и Apollo. Первую часть можно прочитать здесь. Я надеюсь, что к концу вы почувствуете себя комфортно с основополагающими концепциями GraphQL, а также с некоторыми практическими знаниями о создании сервера GraphQL. Если у вас есть отзывы, оставьте комментарий!

Во второй части серии статей о GraphQL и Apollo мы рассмотрим запросы — как ваш клиент получает данные с вашего сервера.

В предложении:

Запрос GraphQL состоит из операции запроса, содержащей набор полей, который декларативно сообщает серверу, какие данные возвращать клиенту.

Безусловно, лучший способ начать работу с запросами GraphQL — увидеть их в действии. Для этого мы будем использовать замечательный инструмент GraphQL: GraphiQL. Здесь есть демо, с которым вы можете поиграться.

Я бы рекомендовал скопировать приведенный ниже пример запроса и посмотреть, что вы получите.

Пример запроса

{
   film(id: "ZmlsbXM6MQ==") {
     id
     title
   }
 }

Ответ, который дает нам этот запрос:

{
   "data": {
     "film": {
       "id": "ZmlsbXM6MQ==",
       "title": "A New Hope"
     }
   }
 }

Магия GraphQL здесь очевидна. Данные очень похожи на ответ, который вы получите в ответ, что является мечтой для тех, кто разрабатывает клиент, который использует эти данные. Они точно знают, что получают (ни больше, ни меньше), а также как это будет структурировано.

Давайте построим наш запрос шаг за шагом:

Здесь у нас есть операция запроса фильма, которая передает серверу id фильма, который мы ищем. Операция выглядит как функция, и это хороший способ представить операторы: функции, которые возвращают значение определенного типа, определяемого принимающим сервером.

{
   film(id: "ZmlsbXM6MQ==") {
   }
 }

Теперь мы фактически не получим никаких данных с сервера без набора выбора (мы получим ошибку), поэтому нам нужно добавить несколько полей в нашу операцию запроса:

{
   film(id: "ZmlsbXM6MQ==") {
     id
     title
   }
 }

Поля определяют, какие данные будет возвращать наш запрос.

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

{
   film(id: "ZmlsbXM6MQ==") {
      id
      title
      characterConnection {
       characters {
         name
       }
     }
   }
 }

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

И последнее о запросах.

Будут времена, когда вы обнаружите, что повторяете поля в операции запроса. Конечно, мы этого не хотим. Мы хотим быть суперсухими. Итак, GraphQL предоставляет нам удобную концепцию под названием «Фрагменты». Фрагменты — это способ объединения полей запроса в многократно используемый фрагмент запроса.

Пример:

{
   darth: person(id: "cGVvcGxlOjQ=") {
      ... PersonFragment
   }
   luke: person(id: "cGVvcGxlOjE=") {
      ... PersonFragment
   }
 }
 fragment PersonFragment on Person {
    id
    name
 }

Обратите внимание, что нам нужно определить, к какому типу (в данном случае Person) может применяться наш фрагмент. Мы также используем псевдонимы для наших данных, о которых вы можете подробнее прочитать здесь.

Теперь вы понимаете, что такое запрос, как он устроен, а также некоторые полезные функции, такие как вложенность и фрагментация. Вы также познакомились с «убийственным приложением» GraphQL, GraphiQL. Вы будете использовать это постоянно. Надеюсь, вы также видите, насколько мощным может быть этот конкретный способ запроса данных с точки зрения разработчика клиента.

В третьей части мы расскажем, как выглядят серверы GraphQL и Apollo и как построить работающую схему.

Ресурсы:
http://graphql.org/docs/queries/