В последние несколько лет GraphQL стал популярным выбором для создания API. Он также служит отличным эквивалентом и альтернативой подходу REST. GraphQL — это язык запросов с открытым исходным кодом для разработки API. В отличие от REST, который представляет собой архитектуру или «способ ведения дел», graphQL был разработан с учетом концепции, согласно которой клиент запрашивает с сервера только желаемый набор элементов в одном запросе. .
В этом руководстве вы узнаете, как интегрировать и работать с клиентом Apollo в приложении Reactjs. Я расскажу вам о том, что такое клиент Apollo, и как подключить его к серверу. и для демонстрации создайте небольшое приложение React, используя инструменты Apollo.
Чтобы узнать больше об основах GraphQL, о том, чем он отличается от REST, его строительных блоках, таких как схема, преобразователи, запросы и мутации, обратитесь к предыдущему сообщению Создание сервера GraphQL с помощью Nodejs.
TLDR;
- Требования
- Что такое клиент Apollo?
- Начало работы: создайте приложение React
- Создание вашего первого клиента Apollo
- Подключите клиент Apollo и приложение React
- Запрос данных из удаленного API GraphQL в приложении React
- Подключение поддержки Crowdbotics к вашему репозиторию Github
- Вывод
- Бонус: Испытание
Требования
Чтобы следовать этому руководству, на вашем локальном компьютере должны быть установлены следующие компоненты:
- NodeJS
v8.x.xили выше установлен вместе с npm/yarn create-react-appглобальный модуль для создания проекта React
Бонус: теперь вы можете использовать npx для создания нового проекта React без установки create-react-app.
Что такое клиент Apollo?
Apollo — это команда, которая создает и поддерживает набор инструментов GraphQL для различных вариантов использования, таких как интерфейс (клиент), сервер и движок. Клиент Apollo помогает использовать GraphQL API на стороне внешнего интерфейса приложения. Он может очень хорошо интегрироваться с популярными интерфейсными фреймворками, такими как React, Angular, Vue и так далее.
Сервер Apollo — это серверная часть GraphQL, где вы управляете и определяете свой GraphQL API, а также обрабатываете ответы, которые отправляются обратно клиенту для ответа на сетевой запрос. Apollo Engine — это размещенная инфраструктура, которая служит платформой для размещения как клиента, так и сервера.
И клиент, и сервер — это инструменты с открытым исходным кодом от Apollo. Единственное, что платно, это двигатель Apollo. Стоит отметить, что эти три инструмента не зависят друг от друга и могут использоваться отдельно, как и в текущем сценарии, где мы собираемся использовать только клиент Apollo. Также стоит отметить, что Apollo Client является ведущим клиентом JavaScript для GraphQL. API GraphQL легко интегрировать и использовать в веб-приложении с помощью React или любого другого внешнего интерфейса.
Начало работы: создайте приложение React
Чтобы создать новый проект React, выполните следующую команду из своего терминала.
Приведенная выше команда создаст новый каталог с именем «apollo-client-react-demo». На данный момент вы можете назвать свой проект React как угодно. После того, как он будет создан, перейдите внутрь него и, чтобы протестировать или убедиться, что все работает правильно, запустите сервер разработки с помощью следующей команды.
Это откроет новое окно браузера по URL-адресу https://localhost:3000 с приложением по умолчанию. Кроме того, для этого урока я сейчас использую create-react-app версию 3. Убедитесь, что у вас есть по крайней мере эта версия или выше, чтобы следовать.
Теперь вы знаете, что все работает, давайте установим зависимости, которые потребуются для того, чтобы зацепить Apollo в приложении React. Установите следующие зависимости либо с помощью npm, либо с помощью yarn.
Что делают эти зависимости? Вкратце:
apollo-boost— это пакет, содержащий все необходимое для настройки клиента Apollo.graphqlтребуется для разбора запросов GraphQLreact-apollo— это интеграция Apollo для React.
Как только эти зависимости будут установлены, давайте перейдем к следующему разделу.
Создание вашего первого клиента Apollo
В этом разделе мы начнем создавать небольшое приложение, которое будет использовать конечную точку GraphQL из этого репозитория Github с открытым исходным кодом. Эта конечная точка позволит нам получить список стран или конкретную страну, которая будет иметь вложенные данные в виде информации об этой стране.
Чтобы проверить, работает ли API, вы можете посетить игровую площадку GraphQL этого API здесь и выполнить приведенный ниже запрос, чтобы проверить его.
Нажмите кнопку воспроизведения посередине, и вы получите объект с именем data, который содержит вложенные поля.
Теперь, когда мы знаем, что API работает отлично, давайте перейдем к шагам, чтобы его использовать. Первый шаг — потребовать ApolloClient из пакета apollo-boost. Откройте файл index.js и добавьте приведенный ниже фрагмент кода после других операторов импорта.
Чтобы получить данные, вы должны указать URI конечной точки, как показано ниже.
Сделав это, давайте завершим процедуру подключения этого клиента Apollo к приложению React.
Подключите клиент Apollo и приложение React
Если вы знакомы с созданием веб-приложений, использующих данные из удаленной конечной точки API, вам может быть интересно, почему мы создаем клиент, когда мы можем получать данные с помощью JavaScript .fetch() API из любой конечной точки GraphQL, как показано ниже.
Ответ на этот вопрос заключается в том, что интеграция клиента Apollo с приложением React (которое в этом сценарии является просто слоем пользовательского интерфейса) упрощает привязку запросов GraphQL и, соответственно, обновление компонентов пользовательского интерфейса данными. Приведенный выше фрагмент кода хорош, но вам придется написать гораздо больше кода, который в какой-то момент по мере масштабирования приложения может стать сложнее поддерживать. Кроме того, клиент Apollo дает вам гораздо больше преимуществ, таких как кэширование в памяти и так далее.
Теперь вернемся к подключению приложения React к клиенту Apollo. Откройте index.js и отредактируйте его, как показано ниже. Начните с импорта Apollo Provider.
ApolloProvider поставляется с пакетом react-apollo. После его импорта мы используем этот провайдер на самом высоком уровне нашего приложения React. Это означает, что компонент App и все его дочерние компоненты (все дерево компонентов) теперь смогут получить доступ к данным GraphQL. Думайте об этом как о обертке. Этот ApolloProvider работает аналогично контекстному API React или хранилищу Redux при использовании Redux для управления состоянием в приложении React. Кроме того, игнорируйте все, что связано с serviceWorker в указанном выше файле.
Запрос данных из удаленного API GraphQL в приложении React
В этом разделе давайте создадим простой компонент списка для всех стран, их кода и флага из конечной точки GraphQL. Чтобы продолжить, создайте новый каталог и внутри него новый файл: src/components/List.js. Внутри этого файла импортируйте следующее.
Преимущество интеграции предоставления клиента Apollo или обычной выборки данных из удаленного API заключается в том, что вы, как правило, можете начать с запроса данных с использованием Query компонентов, поставляемых с react-apollo. Далее нам нужен способ парсить любую строку запроса GraphQL и компилировать в стандартный GraphQL ( AST) при отправке запроса. Это предоставлено gql.
В приведенном ниже фрагменте мы собираемся создать простой функциональный компонент, поскольку он не требует собственного состояния. Перед этим мы определяем наш первый запрос для получения списка всех стран с полями name, code (которые мы будем использовать позже для уникальной идентификации каждого объекта страны) и emoji, которые являются флагами.
Я назову этот запрос GET_ALL_COUNTRIES. Вы можете назвать это как угодно. Все заглавные буквы - это просто условность. Обратите внимание, мы используем литерал шаблона gql. Затем определите компонент пользовательского интерфейса с именем List.
Компонент Query использует graphQL query в качестве своей первой опоры. Он автоматически содержит три параметра: loading, error и data. Еще одно преимущество клиента Apollo здесь. Он автоматически отслеживает загрузку и состояние ошибки, чтобы вы могли сосредоточиться на создании своего приложения. Оба эти состояния представлены определенными полями. data возвращает вас, когда сервер отправляет ответ на запрос.
Посмотрите, как это просто. В приведенном выше фрагменте мы сопоставляем список стран, чтобы получить желаемый результат. Теперь измените файл App.js, добавив этот компонент List для рендеринга.
Чтобы увидеть это действие, убедитесь, что вы используете сервер разработки, используя npm run в окне терминала.
Подключение поддержки Crowdbotics к вашему репозиторию Github
Как только все заработает, теперь давайте добавим версию git в этот проект React, а затем добавим поддержку платформы для создания приложений Crowdbotics. Откройте окно терминала и выполните:
Как только все файлы будут зафиксированы, добавьте этот репозиторий в свою учетную запись Github. Платформа для создания приложений Crowdbotics теперь дает вам возможность подключить репозиторий Github напрямую с помощью интеграции GitHub OAuth (это означает, что вам необходимо иметь учетную запись Crowdbotics или войти в нее, используя свою учетную запись Github).
Более подробную информацию об этом процессе можно найти здесь.
Вывод
Поздравляем! Вы успешно создали свое первое приложение GraphQL + React, использующее возможности клиента Apollo. Вы реализовали простой способ начать работу с React и GraphQL и начать выполнять запросы. Вы не только узнали, как запрашивать данные из удаленного API GraphQL, визуализировать данные в компоненте React, но, я надеюсь, вы понимаете основную концепцию интеграции клиента Apollo в веб-приложение React и его преимущества.
Бонус: Испытание
Вот небольшая задача для вас. Создайте новый компонент с именем CountrySelect, который, в свою очередь, отображает пользовательский интерфейс для выбора страны пользователем, а затем отображает код страны под полем выбора при выборе. Вот визуальная перспектива для вас.
Совет. Вам нужно будет использовать локальное состояние компонента, чтобы отобразить код страны. Но это только один способ сделать это.
Ответ на этот вопрос и полное руководство доступны в репозитории Github 👇
Дополнительные ресурсы см. в официальной документации по клиенту Apollo здесь или ознакомьтесь с моим предыдущим постом о GraphQL и Nodejs👇
Если вам понравилось читать это руководство или вы узнали из него что-то новое, поставьте 👏.
Если вы хотите оставить отзыв об этом сообщении, я всегда доступен вTwitter.
