FakeHub - пример React + Redux + GraphQL

Вы когда-нибудь пытались запросить данные из GitHub API v4 (да, GraphQL)? Что ж, я пробовал на прошлой неделе, но не было надежного примера для выполнения некоторых операций, поэтому я начал небольшой PoC, чтобы воссоздать мини-GitHub, просто чтобы быть уверенным, что понимаю, как все это работает. Я предполагаю, что вы знаете, как работают вместе React + Redux.

TL; DR: Вот репо с завершенным примером

GraphQL

Если вы не знаете, что такое GraphQL, мы можем вернуться к этому на их веб-сайте:

GraphQL - это язык запросов для вашего API и среда выполнения на стороне сервера для выполнения запросов с использованием системы типов, которую вы определяете для своих данных. GraphQL не привязан к какой-либо конкретной базе данных или механизму хранения, а вместо этого поддерживается вашим существующим кодом и данными.

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

Вот довольно важный шаг ... нам нужно выбрать правильный инструмент для выполнения наших запросов, так как это простой пример, который мы собираемся использовать ЭТО ОДИН. Нет необходимости изучать Аполлона или что-то в этом роде, но рекомендуется взглянуть на Аполлона.

Определение области действия FakeHub

Теперь пришло время определить объем нашего проекта, поскольку это PoC, мы собираемся просто показать информацию профиля, сетку с репозиториями, принадлежащими пользователю. И в каждом репозитории мы собираемся позволить возможность просмотра / просмотра или пометки / отмены (также включена навигация внутри каталогов репозиториев).

Это может показаться слишком простым, но если вы проанализируете это там, у вас есть несколько интересных запросов (например, для навигации по каталогам) и две мутации (звездочка / снятие звездочки и наблюдение / наблюдение), если мы добьемся успеха в этом примере, мы сможем Предположим, мы можем неплохо работать с GitHub API.

Страница профиля

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

Здесь мы можем определить заголовок, который будет использоваться всеми страницами, поэтому мы собираемся установить его как заголовок, используя response-router v4, карточку пользователя и сетку репозиториев. Мы можем выделить два основных источника информации: данные профиля и репозитории. В нашем приложении будет два редуктора и два запроса.

Вот когда начинается волшебство, вам нужно создать свой собственный токен личного доступа (без него вы не сможете нажать GitHub API V4, это тот, который мы хотим использовать, потому что старые - это API REST). Чтобы создать его, просто нужно Settings > Developer Settings > Personal Access Tokens и сгенерировать новый, будьте осторожны и сохраните этот токен, потому что как только вы выйдете с этой страницы, вы не сможете ее восстановить, вам нужно будет создать новую. Если у вас есть собственный токен, вам просто нужно установить его как переменную среды.

Чтобы начать работу с GitHub API, вы можете запросить информацию о программе просмотра, например, если мы хотим получить имя пользователя для входа в систему, вам нужно сделать запрос, подобный этому, это довольно просто:

{зритель {логин}}

Теперь нам нужно принять некоторые решения, мы собираемся показать профиль пользователя на /:userId, в то время как мы собираемся показать конкретный экран репозитория на /:userId/:repoName, поэтому, когда вы нажимаете /, вы должны быть перенаправлены на /viewerId, вся эта логика довольно проста. просто.

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

Здесь мы можем увидеть наш первый запрос, который будет предоставлен в качестве информации о пользователе, и первые 6 репозиториев с данными, которые мы хотим показать, включая реального владельца репозитория, потому что он нам нужен для создания URL-адреса, это очень важно сохраните endCursor и hasNextPage, чтобы знать, когда мы закончили запрашивать репозитории:

Аналогичным образом мы можем создать другой запрос, который даст нам следующие 6 страниц с учетом endCursor:

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

Страница репозитория

Здесь мы собираемся просто перечислить основные каталоги веток и информацию о репозитории, мы также собираемся добавить возможность пометить / снять отметку и посмотреть / отменить отслеживание текущего репозитория, прежде всего давайте посмотрим, как это должно выглядеть:

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

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

Выводы

GraphQL - ваш друг, не бойтесь, вначале это может быть беспорядок, но организовать ваши данные действительно здорово.
Если вы не знаете о какой-либо технологии, просто создайте небольшой PoC.
Посетите ЭТОЙ ВЕБ-САЙТ, чтобы прочитать больше подобных сообщений, написанных мной.

FakeHub - пример React + Redux + GraphQL