Gatsby - это генератор статических сайтов на React, основанный на GraphQL. Он может преобразовывать (почти) любые данные из любого источника в GraphQL, позволяет запрашивать эти данные и использовать их для создания статического веб-сайта; статический веб-сайт означает отличную безопасность, потрясающую производительность, SEO для React.

И это идеально, особенно если у вас есть сайт с «контентом», такой как блог, новостной сайт, портфолио и вообще сайты, которые могут быть созданы при обновлении контента (и Gatsby также может создавать поэтапно) и не нуждаются в доступе удаленные данные во время выполнения.

Но предположим, что вы кодируете сайт электронной коммерции с помощью WooCommerce (да, вы можете получить доступ к данным своего магазина через GraphQL и создать сверхбыстрый статический каталог), и вам нужно проверить наличие определенного продукта, прежде чем показывать «Добавить в корзину» кнопку, или вы хотите аутентифицировать пользователя и отслеживать сеанс, корзину, сохранить заказ на удаленном WooCommerce. Или, может быть, вы хотите добавить комментарии в свой блог или показать больше данных (или другую цену) для аутентифицированных пользователей.

Случаев бесконечное количество, в общем, бывают моменты, когда вам нужно получить доступ к удаленным и свежим данным и объединить результат на ваших статических страницах Gatsby, в эти моменты вам понадобится Apollo Client в вашем проекте Gatsby.

Основы Apollo

Чтобы получить доступ к «функциональности» Apollo, вы оборачиваете свое приложение в Provider (со свойствами клиента, такими как URL-адрес GraphQL), а затем на своей странице вы можете получить доступ к паре хуков (в основном useQuery) для запроса данных. Поскольку мы используем Gatsby, мы будем использовать gatsby-browser.js и gatsby-ssr.js для обертывания нашего кода с помощью функции wrapRootElement, чтобы любая страница и любой компонент в проекте могли запрашивать или изменять удаленные источники GraphQL, позволяя вам иметь «живые» данные на статических страницах.

Что мы будем создавать

Мы создадим компактное (и бесполезное) погодное приложение, которое будет запрашивать данные из GraphQL API, который я нашел на Heroku, и отображать результаты, мы также добавим раскрывающийся список для выбора города и реализуем refetch() функциональность Apollo, чтобы всегда получать свежие данные. Вы также можете клонировать репозиторий для этого урока.

Предварительные условия

Чтобы следовать, вам нужно хотя бы иметь базовые знания о React JS, Gatsby (и его файловой структуре), немного о GraphQL (и о том, как запрашивать его).

Проект Гэтсби

Инициализировать проект

Мы начинаем с пустого проекта, я назвал свой gatsby-apollo, я не устанавливал никаких плагинов, кроме sass (но вы можете опустить его или выбрать другой метод стилизации). Давайте начнем с:

npm init gatsby

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

Нам понадобится пара модулей, isomorphic-fetch, который является полифилером для функции выборки:

npm install — save isomorphic-fetch

И, наконец, клиент Apollo и библиотеки graphql

npm install @apollo/client graphql

На этом этапе вы можете заменить содержимое файла pages / index.js пустым шаблоном, подобным этому:

Выполнение следующей команды и посещение http://localhost:8000

gatsby develop

Вы должны увидеть пустую страницу с надписью «Hello World».

Определение провайдера Apollo

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

В папке src создайте новую папку с именем apollo (или назовите ее как хотите), внутри этой папки я создал два файла client.js, которые определяют свойства клиента Apollo, такие как URL-адрес, который мы будем запрашивать, команда для выборки, кеш типа и так далее. Это базовый пример, но клиент может быть более сложным, иногда вы хотите прочитать какой-то заголовок из ответа или вы хотите отправить токен аутентификации на предъявителя в свой запрос:

Другой файл - provider.js, который помещает наше приложение в провайдер Apollo, открывая клиенту все дочерние элементы:

На этом этапе вам необходимо использовать API-интерфейс браузера Gatsby и API-интерфейс рендеринга сервера Gatsby для управления содержимым HTML во время обслуживания (как браузером, так и SSR) и обернуть корневой элемент ApolloProvider.

Создайте файлы gatsby-browser.js и gatsby-ssr.js в корне вашего проекта и в обоих добавьте следующую строку (если вам нужна дополнительная информация об этих APIS, они хорошо задокументированы в Gatsby: https://www.gatsbyjs.com/docs/reference / config-files / gatsby-ssr / # wrapRootElement ):

Это все с конфигурацией. Если вы перезагрузите приложение, оно не должно измениться по сравнению с предыдущим, но если ошибок нет, это означает, что ваша индексная страница теперь обернута в ApolloProvider и может получить доступ к конфигурации клиента, которую мы определили ранее.

Первый запрос

Давайте попробуем, вернемся к index.js, если все работает должным образом, с помощью простого запроса:

Сейчас мы импортируем ловушку useQuery из Apollo и определяем базовый запрос (я не буду вдаваться в подробности запроса и его данных, вы можете найти его конечную точку и документы здесь: https: // graphql-weather-api .herokuapp.com / )
Затем мы используем хук, передающий ему запрос (он может принимать больше параметров, подробнее будет рассмотрен позже), и он возвращает логическое значение загрузки, объект ошибки и объект данных. В зависимости от результата мы можем печатать на странице разные вещи, например, статус загрузки, результаты или ошибку.

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

Мы модифицируем запрос, чтобы получить пару параметров location и unit и вернуть соответствующие данные:

Мы сохраняем параметры, которые мы отправляем в запрос, и результат в состояниях:

Теперь мы можем выполнить запрос, передав параметры, на этот раз мы добавим свойство refetch в useQuery, так как мы хотим обновлять данные при изменении параметра (в противном случае Apollo кэширует результат).

Как видите, хук useQuery, как и раньше, имеет ссылку на запрос (W_Q) и объект конфигурации. Внутри этого объекта мы указываем переменные данные (которые поступают из нашего компонента состояния), параметр notifyOnNetworkStatusChange для обновления компонента при рефлексе, а также метод onCompleted, который будет выполнять обратный вызов после загрузки данных; в этом случае установка состояния погоды и состояния даты (преобразование метки времени в читаемую дату).

Теперь у нас есть почти все в компоненте состояния, поэтому остальное - это размещение данных в нашем интерфейсе и обработка обновления города и единицы для запуска refetch ():

Мы определяем пару функций (которые позже будут связаны с выбором), которые обновят два состояния, эти обновления будут запускать refetch () внутри useEffect.

Что касается рендеринга, это просто базовая страница, вероятно, не оптимизированная, с большим количеством повторений и некоторыми базовыми проверками.

На странице отображается погода на основе состояния location, после изменения местоположения при выборе состояние местоположения обновляется, и это запускает повторную выборку (местоположение является зависимостью useEffect), после повторной загрузки страница повторно отображается .

Следующие шаги

На данный момент у вас есть полный пример того, как извлекать и использовать динамические данные внутри статического проекта с помощью Apollo; подключите своего «клиента» к источнику данных GraphQL, и вы готовы к работе.

Конечно, это базовый пример, но GraphQL также может «писать» в источник с помощью хука useMutation; клиент Apollo также может быть более сложным, чем тот, который мы создали здесь, позволяя обрабатывать сеанс, токены аутентификации и многое другое.
Классическим примером является аутентификация с использованием JWT: вы аутентифицируетесь с помощью мутации входа, GraphQL отправляет вы возвращаете токен, вы берете токен и храните его где-нибудь (например, LocalStorage), в будущем запросе вы можете включить токен (если он есть) в заголовок клиента, чтобы сервер GraphQL знал, что запрос исходит от авторизованных пользователей. Например, пользователи могут получить доступ к своему списку желаний или истории заказов, их делам и т. Д. Путем аутентификации.

Бесплатный публичный GraphQL

Существует множество бесплатных GraphQL API, которые вы можете подключить для игры с Apollo, например, Star Wars API или GitHub API, а также, если у вас есть бессерверная база данных на Datastax, к ней можно получить доступ через GraphQL. Кроме того, Apollo предлагает инструмент для создания схем GraphQL и заполнения их вашим источником данных.

Больше контента на plainenglish.io