13 инструментов и библиотек GraphQL, которые стоит знать в 2019 году

Перевод статьи «13 GraphQL Tools and Libraries You Should Know in 2019».

Инструменты GraphQL
Image source here

GraphQL был разработан Facebook в 2012 году и использовался внутри компании, прежде чем был выпущен в широкий мир в 2015. 7 ноября 2018 года он перешел к GraphQL Foundation в составе Linux Foundation. После этого GraphQL стал все шире применяться, а вокруг него начала создаваться богатая экосистема.

В основе своей GraphQL это «язык запросов для вашего API и среда для выполнения на стороне сервера с использованием системы типов, которую вы определяете для своих данных». Он не привязан к какой-либо базе данных или хранилищу; за ним стоят ваш код и данные. Запрос GraphQL это строка, отсылаемая к среде выполнения и возвращающая клиенту JSON.

Эта простая эффективность породила живую экосистему. Вы найдете в сети много контента на тему GraphQL, выступлений, руководств и – как обычно – обширный набор open source инструментов, клиентов, редакторов и библиотек для улучшения рабочего процесса GraphQL в целом.

В этом посте я собрал несколько лучших инструментов и библиотек GraphQL, от клиентских библиотек до IDE. Список не ранжирован и, разумеется, не является исчерпывающим. Если у вас есть, что добавить, напишите ваши предложения в комментариях.

1. Клиент и сервер Apollo

Платформа Apollo это реализация GraphQL, помогающая вам переправлять данные из облака к вашему UI. Эта платформа может быть наложена в виде дополнительного слоя на ваши уже существующие сервисы, включая REST API и базы данных.

Apollo-client это клиентская библиотека для Apollo GraphQL. Это «полнофункциональный кэширующий клиент GraphQL с интеграцией с React, Angular и т.д.». Apollo-client позволяет вам легко создавать UI-компоненты, которые получают данные через GraphQL. В комбинации с Bit это очень мощный инструмент.

Благодаря декларативному подходу к извлечению данных вся логика для извлечения ваших данных, отслеживания загрузки и состояний ошибок и обновления вашего UI инкапсулирована в одном компоненте Query, который может быть составлен из презентационных компонентов. Весь этот подход во многих случаях может сделать жизнь намного проще.

Apollo-server реализует сервер GraphQL, запросы к которому можно отсылать с любого клиента GraphQL, включая Apollo-client. Таким образом можно быстро создать готовый к работе, самодокументирующийся API для клиентов GraphQL с использованием данных из любого источника. Apollo-server имеет открытый исходный код. Он хорошо работает как в качестве автономного сервера, так и в качестве надстройки к существующему HTTP-серверу Node.js, в «бессерверных» средах и с любой схемой GraphQL, созданной с помощью GraphQL.js.

Также обратите внимание на пару полезных проектов для улучшения работы с Apollo: apollographql/graphql-tools и Akryum/vue-apollo.

2. Bit

Bit это инструмент и платформа (с открытым исходным кодом) для превращения пригодного к повторному использованию кода в компоненты. Этими компонентами вы можете легко делиться, а разрабатывать их можно из разных проектов.

Со времени своего выхода Bit получил широкое распространение в качестве модульного решения для упорядочивания компонентов и обмена ими между проектами. Несмотря на то, что его чаще используют для UI-компонентов, он очень полезен и для GraphQL API, поскольку предоставляет уникальные возможности.

Используя Bit, вы можете мгновенно превратить ваши образцы API и клиента (например, Apollo) в компоненты, которыми вы и ваша команда сможете без проблем делиться и использовать в любом проекте. При этом вы сможете модифицировать код компонента прямо в репозитории, в котором он используется!

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

Вот пример GraphQL API, распространяемого в качестве bit-компонентов. Любой человек может скачать эти компоненты и, внеся нужные ему изменения, использовать их в собственном окружении.

Вот еще пример: React UI-компоненты, реализующие материальный дизайн, представлены в качестве коллекции компонентов Bit. При помощи Bit вы легко можете превратить собственные компоненты в подобную коллекцию.

3. Relay

import {graphql} from 'react-relay';
graphql`
query MyQuery {
viewer {
id
}
}
`;

Relay это JavaScript-фреймворк, созданный Facebook в качестве высокопроизводительной и масштабируемой инфраструктуры для приложений, использующих GraphQL.

Relay служит мостом между React и GraphQL, помогающим использовать преимущества компоненто-ориентированной и инкапсулированной природы React. Через Relay компоненты могут конкретизировать, какие данные им нужны, и получать их. Таким образом компоненты могут соединяться, в то время как данные, необходимые приложению, будут локализованы для каждого отдельного компонента.

Декларативный подход Relay позволяет вам объявлять ваши требования к данным с помощью GraphQL, а Relay будет обрабатывать выборку данных, одновременно объединяя запросы в сетевые запросы для эффективного получения лишь необходимых данных. Данные могут изменяться на клиенте и сервере при помощи GraphQL-мутаций с автоматическим согласованием данных, оптимистическими обновлениями и обработкой ошибок.

Несмотря на меньшую популярность по сравнению с альтернативами вроде Apollo, Facebook запустил обновленный Relay – с лучшим видоизменением API, улучшениями QueryRenderer, опциональным роутингом и т. д. Изменения можно посмотреть здесь.

4. Prisma

Prisma
Prisma

Проект Prisma на GitHub собрал 15 тыс. звезд. Это «база данных инструментов, включающая ORM, миграции и Admin UI (Postgres, MySQL и MongoDB)». Проще говоря, Prisma нацелена заменить традиционные ORM и упростить рабочие процессы баз данных. В комбинации с GraphQL Prisma позволяет легко создавать гибкие, готовые к работе GraphQL-серверы с такими же готовыми к использованию CRUD-операциями, быстродействующим механизмом разрешения запросов, совместимостью с Apollo (клиентом и сервером) и многое другое.

Вот пример GraphQL-сервера, реализованного с помощью Prisma. В его основе лежат еще два отличных проекта от команды Prisma:

  • GraphQL Yoga  – полнофункциональный GraphQL-сервер с фокусом на простой настройку, производительность и удобство разработчика и
  • GraphQL Nexus – инструмент для создания типобезопасных GraphQL-схем с фокусом на код.

5. GraphiQL

GraphiQL

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

Эта IDE имеет подсветку синтаксиса, «умный» тип впереди полей, аргументы и типы, просмотрщик документации, подсветку ошибок в режиме реального времени и отчеты по ним, автоматическое дополнение запроса и инструменты для запуска и проверки результатов запроса. Здесь можно испытать «живое» демо.

6. GraphQL Editor

Как вы догадались, это визуальный редактор Node, облегчающий понимание схем GraphQL. Вы можете создавать схему, объединяя визуальные блоки, а GraphQL Editor преобразует их в код. Хорошо это или плохо, но это «бескодовое решение», помогающее вам быстро и визуальным образом создавать прототип архитектуры вашей системы. Этот редактор даже поставляется в комплекте с готовыми бэкенд-макетами, так что вы сможете сразу приступить к делу.

7. GraphQL Playground

GraphQL Playground

Популярная GraphQL IDE, помогающая управлять подписками, документацией и совместной работой. Поставляется в виде десктопного приложения или веб-версии. Предоставляет такой функционал как контекстное автодополнение и подсветка ошибок, интерактивная многоколоночная документация, GraphQL-подписки в режиме реального времени, поддержка конфигурации с несколькими проектами и endpoints и даже поддержка Apollo Tracing.

Хотя здесь используются компоненты GraphiQL, GraphQL Playground кое-что добавила поверх: интерактивность, многоколоночную схему документации и автоматическую перезагрузку, историю запросов, конфигурацию HTTP-заголовков и вкладки. Использовать отдельную IDE для работы с GraphQL может быть не слишком удобно, но если вы работаете с GraphQL постоянно, GraphQL Playground сэкономит вам много времени.

8. Altair

Altair - инструменты GraphQL

Altair это «GraphQL-клиент для создания запросов к GraphQL-серверу – похожий на Postman, но для GraphQL». При помощи Altair можно добавлять, редактировать и удалять HTTP-заголовки, используемые при создании запросов, включая заголовки токенов аутентификации для запросов, которые требуют авторизованного доступа.

Altair также позволяет вам добавлять к запросу переменные GraphQL для удобного использования динамических значений в ваших запросах. Показ информации о состоянии ответа помогает вам узнать, сколько времени занимают ваши запросы. Есть и дополнительный функционал – показ схемы документации, подсвета синтаксиса и т. д. Отличный инструмент.

9. GraphQL Voyager

Инструменты GraphQL

GraphQL Voyager представляет любой GraphQL API как интерактивную визуальную схему (включая эти публичные GraphQL APIs). Он предоставляет быструю навигацию по вашей схеме. На панели слева можно найти более подробную информацию о каждом типе, опция «skip Relay» упрощает схему, удаляя классы обертки Relay. Также вы можете выбрать любой тип в качестве корня схемы.

10. URQL

URQL

Urql это «очень настраиваемый и разносторонний GraphQL-клиент для React». Создан он Formidable. Этот GraphQL-клиент предоставляет набор компонентов и хуков React, благодаря чему в комбинации с Bit становится очень мощным инструментом (как и Apollo). Идея этого проекта состоит в том, чтобы избежать большого объема большинства клиентов и создать легковесную библиотеку, которая также будет достаточно сложна для масштабирования.

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

11. AWS Amplify Client

AWS Amplify Client - инструменты GraphQL

Эта декларативная JavaScript-библиотека от AWS для разработки приложений с использованием облачных сервисов поставляется с GraphQL-клиентом. При помощи этого легкого в использовании и настройке клиента можно взаимодействовать с вашим GraphQL-сервером или AWS AppSync API.

Эта категория API предоставляет решение для осуществления HTTP-запросов к endpoints REST и GraphQL. Включает класс подписывателя AWS Signature Version 4, который автоматически подписывает за вас все запросы AWS API. Также включает методы для использования API Keys, Amazon Cognito User Pools или сторонних OIDC провайдеров. API-модуль AWS Amplify поддерживает AWS AppSync, а также любые другие бэкенды GraphQL.

12. GraphQL Hooks

Graphql-hooks это очень маленький GraphQL-клиент для React с фокусом на хуки. Поддерживает пользовательские плагины кэширования и рендеринг на стороне сервера. Для начала работы Graphql-hooks нужна самая минимальная настройка. Весит он всего 5,2KB (1,9KB в gzip).

13. Express GraphQL

От GraphQL происходит… express-graphql! Как вы, наверное, догадались, эта полезная библиотека позволяет вам создать GraphQL HTTP-сервер с Express. По умолчанию Express-запрос передается в качестве context GraphQL, а это означает, что вы можете использовать большую часть связующего ПО Express, просто вставив его перед подключением graphqlHTTP для поддержки таких сценариев, как аутентификация пользователей, обработка выгрузки или подключение GraphQL на динамическом endpoint. Если вы работаете с Express, это может быть именно то решение, что вам нужно.

[customscript]techrocks_custom_after_post_html[/customscript]

[customscript]techrocks_custom_script[/customscript]

Оставьте комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Прокрутить вверх