Получение данных с помощью Apollo Client 2.0

Автор Кай Ведекинд

В моем предыдущем посте о « ОТДЫХ в мире. Да здравствует GraphQL », я сосредоточился на введении в GraphQL как серверный уровень. В этой статье я расскажу о том, как подключить приложение Vue.js к GraphQL API через Apollo Client.

Я собираюсь показать вам, как создать простое приложение Vue.js с Apollo 2.0, которое отображает список контактов.

Что такое Apollo Client

Apollo Client - это сверхгибкий, управляемый сообществом, полнофункциональный кэширующий клиент GraphQL для React, Vue.js, Angular и других платформ JavaScript, а также для нативных платформ.

• Интегрируется практически со всем
• Маленький, открытый исходный код, только клиент
• Может быть интегрирован постепенно
• Продуманное кэширование помогает мгновенной сетевой интеграции
• Подключаемый неизменяемый кеш (Redux + RxJS)
• Современный стандарт данных - GraphQL

Вы можете легко создавать компоненты пользовательского интерфейса, которые извлекают данные через GraphQL с помощью одного вызова функции. Apollo Client готов к работе и сегодня используется такими компаниями, как KLM, New York Time, Coursera, Ticketmaster, Khan Academy, и был создан более чем 700 участниками. Вместо Relay Modern, еще одного известного клиента GraphQL, Apollo Client является наиболее популярным способом получения данных GraphQL в вашем приложении.

Версия 2.x клиента Apollo обеспечивает более быструю и гибкую работу. Он нацелен на более настраиваемый опыт работы с GraphQL. Новая версия по-прежнему построена на исходных принципах Apollo Client:

1. Возможность постепенного внедрения, чтобы вы могли добавить его в существующее приложение JavaScript и начать использовать GraphQL только для части вашего пользовательского интерфейса.
2. Универсальная совместимость, так что Apollo работает с любой настройкой сборки, любым сервером GraphQL и любой схемой GraphQL.
3. Начать работу очень просто, так что вы можете сразу начать загрузку данных и узнать о дополнительных функциях позже.
4. Инспектируемый и понятный, чтобы у вас были отличные инструменты разработчика, чтобы точно понимать, что происходит в вашем приложении.
5. Создан для интерактивных приложений, поэтому ваши пользователи могут вносить изменения и сразу же видеть их отражение в пользовательском интерфейсе.
6. Компактный и гибкий, поэтому вы не получите ненужных вещей. Ядро сжато до 25кб.
7. Управляемый сообществом, потому что Apollo движется сообществом и служит множеству вариантов использования. Все планируется и разрабатывается открыто.

Apollo Client 2.x разработан, чтобы использовать все преимущества GraphQL для удовлетворения ваших потребностей в управлении данными.

• Малое ядро: Ядро Apollo Client составляет всего 12 КБ.
• Модульность и расширяемость: модульный подход упрощает добавление новых функций в ваше приложение.
• Новый способ разрешения данных. Apollo Client 2.0 использует наблюдаемые вместо обещаний. Apollo Link - это новый стандартный интерфейс, позволяющий извлекать и изменять потоки управления запросами GraphQL.

Чтобы узнать больше об Apollo Link, прочтите статью Эванса Хаузера Apollo Link: модульный сетевой стек GraphQL.

Полный список официально поддерживаемых пакетов ссылок можно найти здесь.

Что такое Vue.js

Vue.js - это прогрессивная платформа JavaScript для создания пользовательских интерфейсов. Если вы хотите изучить Vue.js, я рекомендую начать с Начало работы в документации Vue.js. Предварительным условием для примера кода являются базовые знания Vue.js.

Если вы использовали модульvue-apollo раньше, то знаете, что это единственная зависимость, которую вам нужно установить в своем приложении (кроме подписок). Благодаря модульности версии 2.x, теперь вам нужно установить дополнительные функции из нескольких пакетов. Документацию по vue-apollo можно найти здесь.

Установите зависимости Apollo:

yarn add vue-apollo@next graphql apollo-client apollo-link apollo-link-http apollo-cache-inmemory graphql-tag

Если вы хотите использовать подписку GraphQL, вы собираетесь установить apollo-link-ws и apollo-utilities следующим образом:

yarn add apollo-link-ws apollo-utilities

Импорт и настройка клиента Apollo

Мы обновили файл main.js, чтобы импортировать все зависимости и настроить Apollo Client. Благодаря этой простой настройке в вашем файле main.js теперь вы можете выполнять вызовы GraphQL на уровне компонентов.

В моем приложении Vue я создал Contacts компонент. Чтобы объявить запросы apollo в вашем компоненте, добавьте объект apollo в скрипт компонента.

new Vue({
    apollo: {
        // Apollo options
    },
})

В объекте apollo добавьте атрибут для каждого свойства, которое вы хотите получить из GraphQL API. Чтобы написать запросы GraphQL, импортируйте gql из graphql-tag в сценарий компонента и поместите запрос gql непосредственно в качестве значения в объект apollo. Затем инициализируйте свойство в ловушке data вашего компонента vue:

Затем в шаблоне компонента Vue вы можете использовать свои свойства как обычно:

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

Чтобы узнать больше о Apollo Client 2.x, просмотрите Vue & Apollo Quickstart и начните работу через 5 минут.

Apollo Client также поставляется с инструментами разработчика, которые вы можете использовать как расширение Chrome. Если вас интересуют отслеживание производительности, управление схемами, отслеживание ошибок и кеширование, вам следует попробовать Apollo Engine.

Подробнее читайте в статье Мэтта ДеБергалиса о Apollo Engine и отслеживании ошибок GraphQL.

Вы можете найти весь мой код на GitHub. Если вам понравилась моя статья о получении данных с помощью Apollo Client 2.0, не забудьте похлопать в ладоши и поделиться ею с друзьями.

Спасибо за чтение и удачного кодирования.

Подробнее