В этом руководстве мы построим приложение React.js, которое взаимодействует с конечной точкой GraphQL. Этот метод настройки проекта является современный и легкий: он использует крючки, модули ES и имеют небольшое количество зависимостей. Мы будем использовать Vite для создания структуры проекта, PNPM для управления зависимостями, URQL для GraphQL и, наконец, графом в качестве шлюза GraphQL к различным API. Наша цель – создать приложение для листинга репозиториев GitHUB конкретного пользователя.
Установите PNPM
Давайте начнем с PNPM , менеджер пакета для JavaScript, который быстрее и эффективнее NPM или пряжа . PNPM Используется адресуемая контентом файловая система для хранения ваших проектных зависимостей. Таким образом, файлы внутри Node_Modules связаны с одним местом на вашем диске. Таким образом, вы устанавливаете каждую зависимость только один раз, и эта зависимость занимает пространство на вашем диске только один раз. Другими словами, библиотеки не копируются для каждого нового проекта. Таким образом, на вершине быстрее, чем альтернативы, PNPM Обеспечивает огромное количество дискового пространства.
npm i -g pnpm
PNPM Поставляется с двумя инструментами командной строки: PNPM Для установки зависимостей и PNPX Для призывающих команд (A NPX эквивалент).
Создать проект
Давайте использовать Vite для создания структуры проекта для нашего проекта React.js. Нам нужно инициализировать проект, используя Vite-App Генератор с реакцией как шаблон. Шаблон должен быть установлен явно используя --template Параметр с реагировать как его ценность. Наконец, Gh-Explorer это пользовательское имя, которое мы даем этому проекту.
pnpm init vite-app gh-explorer --template react
Vite – это инструмент сборки для веб-проектов. Он обслуживает код в разработке с использованием импорта модуля ECMAScript. В производстве Vite связывает код с помощью свертывания. Vite – это легкое решение, которое может быть 100-150x раз быстрее, чем альтернативы, такие как WebPack или посылка. Эта огромная скорость усиления возможна благодаря esbuild. , новый Tymdercript/JavaScript Bundler, написанный с помощью языка Go Programming.
Идите внутрь Gh-Explorer каталог и установить необходимые зависимости с помощью PNPM установить команда. Затем запустите сервер разработки с помощью PNPM Dev и отправляйтесь в localhost: 5000 в вашем браузере. Вы должны увидеть логотип rance.js вместе с счетчиком и кнопкой.
Интегрироваться с однимграф
При взаимодействии с внешними API, нам нужно изучать специфики для каждого нового API, с которыми мы имеем дело. Это особенно видно на уровне аутентификации. Методы аутентификации немного отличаются между одним API и другим. Несмотря на то, что эти API предоставляются либо в качестве конечных точек отдыха или графиков, требуется время и часто много усилий, чтобы узнать, как их использовать. Везю, есть граф. Проект предоставляет слой объединения для различных APISCL API. Используя OneGraph, мы можем просто получить доступ к одной конечной точке и получить доступ к различным API-адресам GraphQL. Думаю, каталог API. Это упрощает и ускоряет развитие. Мы будем использовать OneGraph для взаимодействия с API GitHub.
Давайте создадим приложение в OneGraph:
Затем мы можем использовать Explorer OneGraph для проверки наших запросов GraphQL для GitHub, прежде чем мы интегрируем их с помощью нашего приложения indeg.js. На левой стороне исследователя у меня есть список всех доступных API. Он идет с воздушных, коробка для покупки, полосы, Zendesk и многое другое. Этот каталог довольно впечатляет самостоятельно.
Построить график Запрос
Наша цель – перечислить репозитории конкретного пользователя. Я начинаю с выбора API GitHub. Затем я выбираю Пользователь филиал. Я вхожу в ручку определенного пользователя, например, Zaiste – В этом случае это мое собственное имя пользователя. Я иду дальше вниз по дереву API GitHub, выбрав репозитории филиал. Я хочу перечислить только публичные репозитории, которые не являются вилами и упорядочены количеством звезд. Для каждого репозитория я хочу вернуть его ID , Имя и количество звезд.
Просто нажав на поля в OneGraph Explorer, я заканчиваю со следующим запросом GraphQL:
query GitHubRepositories {
gitHub {
user(login: "zaiste") {
repositories(
first: 10
orderBy: { field: STARGAZERS, direction: DESC }
privacy: PUBLIC
isFork: false
affiliations: OWNER
) {
nodes {
id
name
stargazers(
first: 10
orderBy: {
field: STARRED_AT
direction: DESC
}
) {
totalCount
}
}
}
}
}
}
Интеграция с URQL
Теперь мы можем выполнить этот запрос от нашего приложения indeg.js. Мы будем использовать URQL, универсальный клиент GraphQL для REVING.JS, PREACT и SVELTE. Проект легкий и весьма настраиваемый по сравнению с альтернативами, такими как Apollo или Relay. Его API прост, и библиотека направлена на то, чтобы быть простым в использовании. Нам нужно добавить URQL вместе с graphql как зависимости для нашего проекта.
pnpm add urql graphql
URQL предоставляет Использование крюк. Эта функция принимает запрос GraphQL в качестве ввода и возвращает данные вместе с ошибками и статусом выбора в качестве результата. Назовим наш компонент Репозитарный список Отказ Вы можете использовать обычные .jsx. Расширение или .tsx. Если вы планируете интегрировать с помощью TypebScript – он будет работать в поле с Vite. Нет необходимости в дополнительной настроенную конфигурацию.
export const RepositoryList = () => {
const [result] = useQuery({ query });
const { data, fetching, error } = result;
if (fetching) return Loading...
;
if (error) return Errored!
;
const repos = data.gitHub.user.repositories.nodes;
return (
-
{repos.map(repo => (
- {repo.name} ({repo.stargazers.totalCount}) ))}
Далее в main.jsx Давайте настроим наш клиент GraphQL. Нам нужны Провайдер компонент вместе с CreateClient Функция от urql. и экземпляр Onegraphauth . Для последних нам нужна другая зависимость, то есть onegraph-auth Отказ
pnpm add onegraph-auth
Давайте создадим экземпляр Onegraphauth с appid Из приложения мы создали с помощью OneGraph Dashboard. Затем мы создаем клиент GraphQL с конечной точкой Onegraph как URL параметр. Наконец, мы гнезднем <Приложение/> Компонент внутри
import React from 'react'
import { render } from 'react-dom'
import { createClient, Provider } from 'urql';
import OneGraphAuth from 'onegraph-auth';
import './index.css'
import App from './App'
const appId = "";
export const auth = new OneGraphAuth({ appId });
const client = createClient({
url: 'https://serve.onegraph.com/dynamic?app_id=' + appId,
fetchOptions: () => ({ headers: auth.authHeaders() })
});
render(
,
document.getElementById('root')
)
Аутентифицировать с однимграф
Мы почти закончены. Последний шаг – аутентифицировать пользователя на конечную точку OneGraph. Это единый подход для любого API из каталога OneGraph. Мы будем использовать .Login Метод из onegraph-auth с Github как значение. Как только пользователь входит в систему, мы будем корректировать состояние соответственно, отображая
import React, { useState, useEffect } from 'react'
import './App.css'
import { auth } from './main';
import { RepositoryList } from './RepositoryList';
function App() {
const [isLoggedIn, setIsLoggedIn] = useState(false)
const login = async () => {
await auth.login('github');
const isLoggedIn = await auth.isLoggedIn('github');
setIsLoggedIn(isLoggedIn);
}
return (
GitHub Projects via OneGraph
{isLoggedIn ? (
)
}
export default App
Результат
Это все. Вот окончательный результат. Вам может потребоваться отрегулировать таблицы стилей для того же визуального эффекта.
Мы создали приложение rance.js, используя Крючки Отказ У проекта есть Минимальный набор зависимостей Отказ Используется современный Модули Ecmascript подход. Это Эффективно в дисковом пространстве Как использует PNPM в качестве менеджера пакета. JavaScript/Teamecript трансиляция – 100-150x быстрее чем усердник или посылка. Мы используем простой и универсальный клиент GraphQl под названием urql. . Наконец, мы получаем доступ к API GitHub через Однографом Meta API, которая обеспечивает впечатляющий каталог APICQL APICL с унифицированным методом доступа. Конечный результат легкий и современный.
Я надеюсь, что вы будете использовать некоторые из этих элементов в вашем будущем rance.js. Если вам понравилась статья, Следуй за мной в Twitter для большего.
—
Видеоурок
Если вы предпочитаете просмотр учебных пособий по программированию, а не чтение их, проверьте это видео на YouTube, где я код приложения, пошаговый.
Если вам это нравится, Подписаться на мой канал Отказ
Оригинал: “https://dev.to/zaiste/modern-react-js-setup-for-graphql-using-vite-urql-abg”