Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. GraphQL

Введение в Apollo Client с React на GraphQL

by
Read Time:6 minsLanguages:

Russian (Pусский) translation by Anna k.Ivanova (you can also view the original English article)

Недавно GraphQL набрал популярность и, скорее всего, заменит Rest API. В этом уроке мы будем использовать Apollo Client для связи с API-интерфейсом GitHub. Мы объединим Apollo Client с ReactJS, но вы можете использовать его и с несколькими другими клиентскими платформами.

В этом руководстве не рассматривается процесс запуска проекта React, но вы можете использовать приложение create-response-app чтобы начать работать.

После того, как у нас появится готовое приложение react, необходимо установить необходимые модули.

Установка модулей

Следующая строка устанавливает все необходимые модули.

Теперь мы можем предоставить наш компонент клиенту.

Предоставление клиенту компонента

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

Выше мы видим, что мы определили uri для GitHub, а также использовали определенный токен для headers. Вы должны использовать свой собственный токен, созданный GitHub. Поэтому не забудьте заменить его YOUR_TOKEN.

В этом примере мы определили маркер API на стороне клиента. Однако вы не должны публиковать свой API токен. Поэтому всегда полезно хранить его на сервере, отделенном от клиентской стороны.

Обратите внимание, что мы завернули компонент <App/> с помощью ApolloProvider и использовали переменную client, созданную для свойства client.

Приложение GraphiQL

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

Как только вы откроете GraphiQL, вам нужно установить GraphQL Endpoint и HTTP Headers.

GraphQL Endpoint: https://api.github.com/graphql

Header Name: Authorization

Header Value: Bearer YOUR_TOKEN

Конечно, вам нужно заменить YOUR_TOKEN на свой токен. Не забудьте включить Bearer перед токеном при определении Header Value.

Если вы не хотите загружать приложение, вы также можете использовать онлайн-интерфейс GraphQL API Explorer для GitHub.

Запросы GraphQL

В отличие от REST API с несколькими API ендпоинтами, GraphQL имеет только один ендпоинт, и вы получаете только то, что определено вашим запросом.

Документация GigHub's GraphQL API даcт вам больше информации.

Кроме того, лучшая часть приложения GraphiQL заключается в том, что оно дает вам доступ к документации для запросов прямо внутри приложения. Вы можете увидеть боковую панель справа - Docs.

Начнем с простейшего запроса:

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

В этом уроке я не буду приводить подробную информацию о запросах. Вы всегда можете обратиться к документации и попробовать запросы в инструментах GraphQL, чтобы узнать, получаете ли вы правильные данные.

Давайте используем следующий запрос для остальной части учебника.

Этот запрос ищет последние 10 репозиториев, соответствующих определенной строке ввода, которые мы определим в нашем приложении.

Он возвращает idnamedescription и url для каждого результата.

Использование запроса GraphQL в компоненте React

Нам нужно импортировать два модуля ниже в наш компонент React, чтобы иметь возможность определять запрос в компоненте, а затем передавать результаты компоненту в качестве props.

Здесь мы присвоили наш запрос константной переменной, но мы еще не определили параметр name.

Теперь мы завершаем наш компонент с graphql HOC (Higher Order Component), чтобы определить параметры запроса, выполнить запрос и затем передать результат в качестве props для нашего компонента.

Ниже приведен финальный вариант нашего компонента.

Обратите внимание, что мы экспортируем не фактический компонент App, а завернутый компонент, который является AppWithData.

Проверка данных в консоли

Давайте продолжим и добавим {console.log (this.props)} к методу render вашего компонента.

Когда вы проверите консоль своего браузера, вы увидите два лога с объектами.

Внутри каждого объекта вы увидите свойство data. Это обеспечивается нашим компонентом через graphql HOC.

Обратите внимание, что первый журнал имеет свойство loading: true внутри data, а второй лог имеет loading: false и новый объект с именем search, который является именно теми данными, которые мы хотели получить.

Отображение данных

Давайте напишем JSX для отображения извлеченных данных.

Поскольку объект search изначально не существует, мы не можем напрямую попытаться его отобразить. Поэтому сначала нам нужно проверить, были ли получены данные, и объект search готов к использованию.

Для этого мы просто будем использовать информацию из loading, предоставленную внутри свойства data.

Если loading равно true, мы просто выводим текст «Loading», иначе сами данные.

Я использовал тернарный оператор ?: для базовых встроенных условных выражений. Если loading равно true, мы показываем «Loading», а если false, мы используем функцию map для итерации по нашему массиву данных, чтобы отображать информацию внутри элементов <ul> и <li>.

Это всего лишь базовый пример. Вы можете использовать обычную инструкцию if-else и возвращать разные результаты для вашего метода render.

Вы можете проверить репозиторий Apollo-Client-with-React, клонировать его на свой компьютере и поиграть с ним.

P.S. Не забудьте заменить переменную token на свой собственный токен API для GitHub.

Заключение

Мы рассказали о том, как начать работу с Apollo Client для React. Мы установили необходимые модули, настроили клиент, а затем предоставили его нашему компоненту в верхней части иерархии компонентов. Мы научились быстро тестировать запросы GraphQL, прежде чем внедрять их в нашем реальном приложении. Наконец, мы интегрировали запрос в компонент React и отобразили извлеченные данные.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.