Первое, что нужно знать: GraphQL — это спецификация (как она должна работать и выглядеть), а не реализация. GraphQL не нужно устанавливать, вы реализуете его с помощью серверной библиотеки, клиентской среды, такой как Apollo, и игровых площадок, таких как GraphiQL или Graphcool, для проверки ваших запросов.
Ключевые моменты GraphQL:
- среда выполнения на стороне сервера
- быстрый, гибкий, удобный для разработчиков
- предоставляет клиентам именно те данные, которые они хотят/указали, а не всю полезную нагрузку данных
- отличные реляционные запросы — все запросы можно выполнить в одном запросе, без «избыточной выборки»²
- предоставляет бэкенд-разработчикам систему типов для разработки схемы данных
- сильные типы данных уменьшают количество ошибок между клиентом и сервером
- несколько URL-адресов для получения данных отбрасываются, вместо этого теперь есть только одна точка входа
- ответ по-прежнему отправляется обратно как json
- синтаксис может работать с любым языком программирования
- потребитель читает данные с помощью «типа запроса»
- потребитель мутирует (создает, обновляет, удаляет) данные с помощью «мутации типа»
GraphQL: более простые реляционные запросы, самодокументирование. С GraphQL Server, как только вы запускаете сервер, выполняются вызовы API, принимаются и обрабатываются ответы, и только необходимые данные помещаются в форму, которую мы запросили/указали для запросов на стороне клиента. В отличие от RESTful API, теперь нет времени ожидания ответа, ответ уже обработан. Единственное время ожидания — это получение и представление данных из облака.¹ Вызов и ответ обрабатываются, как только сервер начинает работать, что ускоряет работу приложения.
Аполлон
Аполлон: система GraphQL. Не такой самоуверенный, как Relay, и меньше кода. Легко начать работу с GraphQL
Apollo состоит из 2 компонентов: сервера Apollo и клиента Apollo.
Сервер Apollo — это то, что позволяет Apollo и GraphQL работать вместе и станет API на стороне клиента. Apollo заменяет API, а мутации заменят маршруты на стороне сервера и методы Meteor.
Сервер Apollo создает график для вашего приложения, а затем позволяет вам создать API для подключения к этому графику. Доступ к этому графику осуществляется через одну конечную точку GraphQL. Оформить заказ Теория графов здесь.
ОТЛИЧНЫЙ! ДАВАЙТЕ СТРОЙ
Сборка с этого момента будет полностью основана на заметках, которые я делаю, просматривая БЕСПЛАТНОЕ руководство willjw3 по Full-Stack Apollo GraphQL с React и Node — здесь. Я не могу брать кредит на то, что последует!
Мы собираемся создать полнофункциональное приложение с помощью: Apollo, GraphQL & React.js и Node.
Создайте каталог приложения и перейдите в него с помощью команды терминала: mkdir graphql-usgs-earthquake-api && cd graphql-usgs-earthquake-api.
Инициализируйте приложение с помощью команды терминала: npm init -y .
Я узнал, что вы можете установить более 1 пакета узлов в 1 команду. Например, нам нужно установить Apollo Server и GraphQL. Установите их оба с помощью команды терминала: npm i apollo-server graphql.
Откройте свое приложение в предпочитаемом вами текстовом редакторе.
Настройте 2 каталога в корне вашего приложения: Server & Client . Это команды терминала mkdir server и mkdir client .
В папке сервера настройте 2 файла: index.js и schema.js . В файле index.js введите следующий код (прямо из документации Apollo здесь):
Напишите файл schema.js (прямо из Apollo Docs здесь):
Добавление определений типов в schema.js:
Вернувшись в файл index.js, добавьте вызов сервера в конец файла:
Нам потребуется установить Nodemon для автоматического обновления сервера; введите команду терминала: npm i nodemon . Настройте собственный скрипт для запуска сервера в файле package.json ((строка 7)):
Ваш терминал должен показать вам, что вы успешно работаете:
Кроме того, если все успешно подключено, если вы перейдете на http://localhost:4000/, вы увидите, что теперь у вас есть полный доступ к игровой площадке GraphQL:
Посмотреть схему можно на игровой площадке:
Или вы можете просмотреть документы:
Подключение источников данных
Давайте настроим файл, который будет извлекаться непосредственно из API Геологической службы США, чтобы посмотреть, какие данные о землетрясениях мы получаем. Этот файл не будет использоваться в нашем приложении в долгосрочной перспективе, это будет просто тестовая площадка.
Установите Node-Fetch: npm i node-fetch .
В корневой папке создайте новую папку: mkdir dataExplore . Настройте в этой папке файл с именем earthquakeFetch.js .
Запустите этот файл и выполните выборку с помощью команды терминала: node dataExplore/earthquakeFetch.js .
Создать внешний источник данных API
Установите пакет Apollo REST Data Source: npm i apollo-datasource-rest . Этот пакет экспортирует класс (RESTDataSource), который используется для извлечения данных из REST API и предоставления их через GraphQL на сервере Apollo.
Создайте папку внутри папки сервера и назовите ее datasources . Внутри источников данных создайте файл earthquake.js.
Добавить источник данных на сервер Apollo
После создания источника данных его необходимо добавить на сервер Apollo.
Обновите файл index.js (внутри папки сервера) следующим кодом:
Прямо из документации: Передайте параметр dataSources конструктору ApolloServer. Эта опция представляет собой функцию, которая возвращает объект, содержащий вновь созданные источники данных. Это соединяет экземпляры землетрясений API с нашим графиком.
Напишите преобразователи графов
Преобразователи графов позволяют просматривать данные на игровой площадке GraphQL. Что такое резольвер? Преобразователь — это функция, которая отвечает за заполнение данных для одного поля в вашей схеме. Когда клиент делает запрос, распознаватель отвечает за получение запрошенных данных из правильного источника данных.
Преобразователь возвращает одно из следующих значений:
- Данные требуемого типа (согласно соответствующему полю схемы преобразователя)
- Обещание, которое выполняется с данными требуемого типа
Для начала мы обновим наш server/index.js, чтобы он требовал файл преобразователя, и передаем этот модуль в ApolloServer (строки 3 и 9):
Настройте файл распознавателей: непосредственно в папке server создайте новый файл: resolvers.js . (Обратите внимание, что сигнатура функции преобразователя: fieldName: (parent, args, context, info) => data; )
Здорово! Теперь давайте удостоверимся, что все запрашивается правильно. Перейдите на игровую площадку GraphQL: http://localhost:4000/. введите свой запрос в левый столбец (примечание: контрольное пространство предоставит вам все возможные варианты запросов), затем нажмите кнопку запуска (стрелка в центре экрана), и ваш запрос, если весь код был реализован правильно, должен заполниться в правая часть экрана:
РЕПО: https://github.com/osha7/graphql-usgs-earthquake-api
- Полный стек Apollo GraphQL с React и Node | willjs3 | «https://www.youtube.com/watch?v=VjXb3PRL9WI»
- Что такое GraphQL | красная шляпа | «https://www.redhat.com/en/topics/api/what-is-graphql»
- GraphQL | «https://graphql.org/»
- Аполлон | «https://www.apollographql.com/docs/»
- Что такое GraphQL | LevelUpTuts | «https://www.youtube.com/watch?v=VjXb3PRL9WI»
- GraphQL объясняется за 100 секунд | Огненный корабль | «https://www.youtube.com/watch?v=eIQh02xuVw4»
- Полный стек GraphQL с Apollo, Meteor и React | Учебники по повышению уровня | «https://www.leveluptutorials.com/tutorials/full-stack-graphql-with-apollo-meteor-and-react»
