Это вторая часть из пяти вводных статей о 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/