ОПЫТ РАЗРАБОТЧИКА
Все, что я узнал о GraphQL и Apollo
Что я узнал по пути
В те времена, когда была разработана интерфейсная часть, получение данных из веб-API было очень утомительным процессом. Действительно, модель данных была заморожена, что означает, что вы столкнулись с одной из следующих ситуаций:
- Модель данных была слишком богатой для вашего варианта использования.
- Некоторые данные отсутствовали.
- Вам нужно было связать запросы, чтобы получить ожидаемую структуру данных.
Чтобы преодолеть эти ситуации (и упростить задачи фронтенд-разработчика), был создан GraphQL. Он предоставляет новый способ получения данных из серверной части. Вместо того, чтобы иметь дело с замороженными структурами данных, GraphQL предлагает язык запросов, который позволяет нам получать только то, что нам нужно.
В этой статье я не буду объяснять, как работает GraphQL или как его настроить - Medium содержит множество содержательных статей о GraphQL и Apollo, его клиенте для веб-и мобильных приложений, и вы можете найти документацию здесь:
И тут:
В этой статье я поделюсь некоторыми советами, которые я обнаружил при использовании GraphQL и Apollo, чтобы упростить разработку и сделать код, связанный с Apollo, многоразовым.
Отказ от ответственности: большая часть фрагментов кода касается Vue.js и Vue Apollo. В любом случае, когда я представляю концепции и подсказки, я предполагаю, что их можно применить к любой другой платформе JavaScript, поддерживаемой GraphQL и Apollo.
В первую очередь…
GraphQL
Как я сказал ранее, GraphQL - это новая технология, которая изменяет отношения между внутренними и внешними разработчиками.
Раньше обеим командам приходилось определять интерфейс контракта, чтобы гарантировать правильную реализацию. Иногда задержки могут возникать из-за неправильного понимания сложности объекта или типизации.
Благодаря GraphQL бэкенды могут предоставлять все данные, которые могут понадобиться фронт-энду. Затем они должны «выбрать» свойства, необходимые для создания интерфейса.
Кроме того, GraphQL предлагает веб-интерфейс (названный GraphiQL) для тестирования запросов и мутаций (если вы не понимаете, о чем я пишу, обратитесь к документации). Это умный инструмент, позволяющий пользователям писать запросы, просматривать документы и печатать.
Язык запросов
Использование GraphQL подразумевает понимание и освоение языка запросов, входящего в комплект. Это нетривиальный вопрос, и он основан на синтаксисе вложенности объектов.
query GetProductInfo {
product {
id
name
price
}
}
Когда запрос объекта кажется простым, это не относится к мутациям. Мутация обновляет / вставляет новые данные, возможно, с некоторыми аргументами.
mutation ($label: String!) {
addTag(label: $label) {
id
label
}
}Здесь аргумент указывается с его типом на L1. Затем он используется во второй строке. Конечное содержимое между квадратными скобками id и label определяет структуру возвращаемого объекта, результат вставки.
Аполлон
Apollo - это клиент, используемый для связи с GraphQL. Независимо от того, разрабатываете ли вы веб-приложение или мобильное приложение, Apollo может его поддержать.
Apollo поддерживает несколько платформ:
- JavaScript: Angular, React, Vue, Meteor, Ember, Polymer
- Родной мобильный: Родной iOS с Swift, Родной Android с Java
Его конфигурация позволяет определять конкретные аспекты, такие как: стратегия кеш-сети, конвейеры (рассматриваются здесь), рендеринг на стороне сервера (версия Vue.js), локальное состояние (версия Vue.js ), Производительность , обработка ошибок (рассматривается здесь) или интернационализация (рассматривается здесь).
Сделайте запросы многоразовыми
ES6 спешит на помощь!
Существует множество способов создания запросов Apollo (также называемых документами GraphQL). Чаще всего используется синтаксический анализатор graphql-tag .
Тогда запрос будет выглядеть так:
import gql from 'graphql-tag'
const hello query = gql`query sayHello {
hello
}`Это хорошая привычка хранить такие запросы в специальной папке, например ~/api/apollo-queries, и разделять их по функциям в конкретном файле: вы будете собирать запросы, касающиеся user, product или contract проблем.
Возможно, вы знаете, что документы GraphQL имеют несколько свойств:
query: сам запрос сgqlпарсером.variables: если вам нужно передать аргументы.update: функция обратного вызова для форматирования ответа на запрос или вычисления дополнительных операций.
Последнее свойство - наша точка входа для создания запросов многократного использования. Действительно, с помощью простого запроса вы можете выполнять разные операции.
Функции деструктурирующего присваивания и оператора распространения ES6 - мощные инструменты для повторного использования одного запроса в нескольких местах. Вот несколько примеров.
Переменные разные
Update обратный вызов отличается
Повторно использовать запрос в обновлении магазина
Условный и параметризованный запрос
Как описано в этом разделе документации Vue Apollo, мы можем создавать условные запросы - также известные как определение реактивного запроса - чтобы мы могли делать это для переменных.
Кроме того, вы можете вставить любой фрагмент кода в шаблон запроса, потому что синтаксический анализатор gql - это просто интерполяция строк. Итак, вы можете легко написать эту мутацию:
gql`
mutation UpdateBirthdate ($bd: String!) {
updateBirthdate(input: {
birthDate: ${'"' + moment($bd).format('YYYY-MM-DD') + '"'}
}){
ok
}
}
`
Это не чистая практика, но иногда она позволяет сэкономить время и силы. Желательно очистить входные данные перед отправкой их на мутацию.
Moment.js - это JS-библиотека для обработки DateTimes.
Контекстуализация запросов GraphQL
Назовите свой запрос
Если вы проверите HTTP-запрос, отправленный при запросе вашего сервера GraphQL, вы увидите свойство operationName:
Может показаться бессмысленным добавлять имя к запросам Apollo, но это может быть очень полезно при отладке или если вы хотите отслеживать вызовы REST API. Действительно, в моей компании мы хотим отслеживать эти запросы на производительность и эффективность сервера.
Именование запросов действительно просто и удобно:
query GetProductInfo {
product {
id
name
price
}
}
Интернационализация
Интернационализация (или i18n) - это адаптация языка и культуры в вашем приложении. Однако предоставление переводов для каждого языка может раздражать - это утяжеляет комплект и требует обновлений.
Знаете ли вы, что сервер GraphQL может поддерживать интернационализацию благодаря параметру запроса? Просто требуется доработка серверной части.
Что касается передней части, необходимо провести дополнительную настройку. Он включает в себя указание конвейера в HttpLink настройке клиента Apollo - ничего сложного:
Вы можете объединить операции в конвейер, подробнее здесь.
Улучшение опыта кодирования
Вы могли заметить, что ответ на запрос GraphQL содержит свойство __typename:
При использовании одного и того же объекта в мутации появится следующая ошибка:
"Variable "$data" got invalid value {
"__typename": "UserSchema",
//...
"phone": "06 07 08 09 11"
}.↵In field "__typename": Unknown field."
Действительно, свойство __typename все еще присутствует, и чтобы мутация работала, его нужно удалить. Покопавшись в InMemoryCache документации, мы можем убрать это свойство из ответа на запрос:
Запросы по заказу
В некоторых местах кода необходимо одновременно запускать несколько запросов. Иногда, в зависимости от ответа на запрос, мы хотим запустить новый или пропустить запрос.
К счастью, Apollo предлагает способ облегчить эти задачи! Действительно, для объекта query существует свойство skip:
С другой стороны, чтобы пропустить запросы:
Поддержка машинописного текста
Vue Apollo не поддерживает Typescript напрямую. Однако вы можете добавить некоторые типы и интегрировать некоторые функции Typescript в свой код с любой проблемой.
Генераторы кода существуют для генерации типизации на основе схем GraphQL. Лично я не использовал ни один из них, поэтому, если вам интересно, обратитесь к:
Улучшение пользовательского опыта
Используйте состояние загрузки
Поскольку время ответа от сервера неизвестно, мы должны предупредить пользователя, что что-то обрабатывается. Текущая тенденция - использование скелета:
Объект запроса GraphQL очень удобен для разработчиков, когда он имеет дело с управлением состоянием загрузки. Действительно, он предлагает логическое свойство loading. Таким образом, мы можем использовать его в шаблоне:
Используйте Apollo Store для сокращения времени отклика
Магазин Apollo действует как тайник. Он сохраняет HTTP-запросы и позволяет нам получать данные практически мгновенно. Если вы используете стратегию cache-and-network (по умолчанию), клиент Apollo сначала получит данные из Магазина, а в случае отсутствия данных - на сервере GraphQL.
Я рекомендую использовать расширение Apollo Client Developer Tools для Chrome, чтобы легко управлять и отлаживать Apollo Store.
Если мутации правильно реализованы на серверной стороне, они вернут обновленный ресурс в ответ. Такое поведение позволяет обновлять Apollo Store, поэтому при переходе в другое место в приложении данные уже будут доступны - вам не нужно будет выполнять другие запросы.
Обработка ошибок
Во время навигации по вашему приложению могут появляться различные ошибки. Независимо от того, происходят ли они из-за внутренней ошибки сервера или из-за сбоя сети, с ними нужно работать.
Это управляется на уровне провайдера Apollo. Здесь мы обрабатываем сетевую ошибку в случае отсутствия токена сеанса (cookie):
Заключительные слова
Нет сомнений: GraphQL - супер мощный инструмент. Это упрощает программирование и взаимодействие между серверной и интерфейсной командами. Однако он имеет некоторые недостатки, особенно когда речь идет о поддержке Typescript. Кроме того, упорядочивание запросов не так просто и может стать более сложным в зависимости от вашей модели данных и того, как вы хотите создать свою страницу.
