분류 Reactjs

Vite 및 urql을 사용하는 GraphQL 용 경량의 최신 React.js 설정

컨텐츠 정보

  • 조회 429 (작성일 )

본문

이 튜토리얼에서는 GraphQL 엔드 포인트와 상호 작용하는 React.js 애플리케이션을 빌드합니다. 

이 프로젝트 설정 방법은 현대적이고 가볍습니다. 후크, ES 모듈을 사용하고 약간의 종속성이 있습니다. 

Vite를 사용하여 프로젝트 구조를 만들고 pnpm을 사용하여 종속성을 관리하고 urql을 GraphQL로, 마지막으로 OneGraph를 다양한 API에 대한 GraphQL 게이트웨이로 사용할 것입니다. 

우리의 목표는 특정 사용자의 GitHub 리포지토리를 나열하기 위한 애플리케이션을 만드는 것입니다.


https://zaiste.net/posts/modern-lightweight-reactjs-setup-graphql-vite-urql/


pnpm 설치 


npm 또는 yarn보다 빠르고 효율적인 JavaScript 용 패키지 관리자 인 pnpm부터 시작하겠습니다. 

pnpm은 콘텐츠 주소 지정이 가능한 파일 시스템을 사용하여 프로젝트 종속성을 저장합니다. 이렇게 하면 node_modules 내부의 파일이 디스크의 단일 위치에서 링크됩니다. 

따라서 각 종속성을 한 번만 설치하고 이 종속성은 디스크의 공간을 한 번만 차지합니다. 즉, 새 프로젝트마다 라이브러리가 복사 되지 않습니다. 이런 식으로 pnpm은 다른 방법보다 빠르며 디스크 공간을 크게 늘립니다.


npm i -g pnpm 


pnpm에는 종속성 설치를 위한 pnpm과 명령 호출을 위한 pnpx (npx와 동일)의 두 가지 명령 줄 도구가 함께 제공됩니다.


프로젝트 만들기 


Vite를 사용하여 React.js 프로젝트의 프로젝트 구조를 만들어 보겠습니다. React를 템플릿으로 하는 vite-app 생성기를 사용하여 프로젝트를 초기화해야 합니다. 템플릿은 값으로 react와 함께 --template 매개 변수를 사용하여 명시 적으로 설정해야 합니다. 마지막으로 gh-explorer는 이 프로젝트에 부여하는 사용자 지정 이름입니다.


pnpm init vite-app gh-explorer --template react 


Vite는 웹 프로젝트를 위한 빌드 도구입니다. ECMAScript 모듈 가져 오기를 사용하여 개발 중인 코드를 제공합니다.

 프로덕션에서 vite는 Rollup을 사용하여 코드를 묶습니다. Vite는 Webpack 또는 Parcel과 같은 대안보다 100-150 배 더 빠른 경량 솔루션입니다. 

이 엄청난 속도 향상은 Go 프로그래밍 언어를 사용하여 작성된 새로운 TypeScript / JavaScript 번들러 인 esbuild 덕분에 가능합니다.


esbuild benchmark 


gh-explorer 디렉토리로 이동하고 pnpm install 명령을 사용하여 필요한 종속성을 설치합니다. 그런 다음 pnpm dev로 개발 서버를 시작하고 브라우저에서 localhost : 5000으로 이동합니다. 카운터 및 버튼과 함께 React.js 로고가 표시되어야 합니다.


A React.js project generated by Vite 

OneGraph와 통합 


외부 API와 상호 작용할 때 우리가 다루는 각각의 새로운 API에 대한 세부 사항을 배워야 합니다. 이것은 특히 인증 수준에서 볼 수 있습니다. 

인증 방법은 API마다 약간 다릅니다. 이러한 API는 REST 또는 GraphQL 엔드 포인트로 제공되지만 사용 방법을 배우려면 시간과 노력이 많이 소요됩니다. 다행히 OneGraph가 있습니다. 이 프로젝트는 다양한 GraphQL API에 대한 통합 계층을 제공합니다. OneGraph를 사용하면 하나의 엔드 포인트에 액세스하고 한 번에 다양한 GraphQL API에 액세스 할 수 있습니다. 

API 카탈로그를 생각해보십시오. 이것은 개발을 단순화하고 가속화합니다. OneGraph를 사용하여 GitHub API와 상호 작용합니다.


OneGraph에서 응용 프로그램을 만들어 보겠습니다.


Creating an application in OneGraph 


그런 다음 OneGraph의 Explorer를 사용하여 React.js 애플리케이션과 통합하기 전에 GitHub에 대한 GraphQL 쿼리를 테스트 할 수 있습니다. Explorer의 왼쪽에는 사용 가능한 모든 API 목록이 있습니다. Airtable, Box에서 Shopify, Stripe, Zendesk 등으로 이동합니다. 이 카탈로그는 그 자체로 매우 인상적입니다.


OneGraph's Explorer 

GraphQL 쿼리 생성 


우리의 목표는 특정 사용자의 저장소를 나열하는 것입니다. 먼저 GitHub API를 선택합니다. 그런 다음 사용자 분기를 선택합니다. 특정 사용자의 핸들을 입력합니다. zaiste-이 경우 내 사용자 이름입니다. 리포지토리 분기를 선택하여 GitHub API 트리 아래로 이동합니다. 포크가 아닌 별의 수로 정렬 된 공용 저장소 만 나열하고 싶습니다. 각 저장소에 대해 ID, 이름 및 별 수를 반환하고 싶습니다.


OneGraph Explorer for GitHub in action 

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과 통합 


이제 React.js 애플리케이션에서 이 쿼리를 실행할 수 있습니다. React.js, Preact 및 Svelte를위한 다목적 GraphQL 클라이언트 인 urql을 사용합니다. 이 프로젝트는 Apollo 또는 Relay와 같은 대안에 비해 가볍고 사용자 정의가 가능합니다. API는 간단하고 라이브러리는 사용하기 쉬운 것을 목표로 합니다. 프로젝트의 종속성으로 graphql과 함께 urql을 추가해야 합니다.


pnpm add urql graphql 


urql은 useQuery 후크를 제공합니다. 이 함수는 GraphQL 쿼리를 입력으로 받아 오류 및 가져 오기 상태와 함께 데이터를 결과로 반환합니다. 컴포넌트 이름을 RepositoryList로 지정합니다. 일반 .jsx 확장명을 사용하거나 TypeScript와 통합하려는 경우 .tsx를 사용할 수 있습니다. Vite와 함께 즉시 작동합니다. 추가 TypeScript 구성이 필요하지 않습니다.


export const RepositoryList = () => { const [result] = useQuery({ query }); const { data, fetching, error } = result; if (fetching) return <p>Loading...</p>; if (error) return <p>Errored!</p>; const repos = data.gitHub.user.repositories.nodes; return ( <ul> {repos.map(repo => ( <li key={repo.id}>{repo.name} <small>({repo.stargazers.totalCount})</small></li> ))} </ul> ); } 


다음으로 main.jsx에서 GraphQL 클라이언트를 구성 해 보겠습니다. urql의 createClient 함수 및 OneGraphAuth의 인스턴스와 함께 Provider 구성 요소가 필요합니다. 후자의 경우 다른 종속성, 즉 onegraph-auth가 필요합니다.


pnpm add onegraph-auth 


OneGraph 대시 보드를 사용하여 만든 애플리케이션의 appId로 OneGraphAuth의 인스턴스를 만들어 보겠습니다. 그런 다음 OneGraph 끝점을 url 매개 변수로 사용하여 GraphQL 클라이언트를 만듭니다. 마지막으로 <Provider /> 내부에 <App /> 구성 요소를 중첩합니다.


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 = "<Your APP_ID from OneGraph goes here>"; export const auth = new OneGraphAuth({ appId }); const client = createClient({ url: 'https://serve.onegraph.com/dynamic?app_id=' + appId, fetchOptions: () => ({ headers: auth.authHeaders() }) }); render( <React.StrictMode> <Provider value={client}> <App /> </Provider> </React.StrictMode>, document.getElementById('root') ) 


OneGraph로 인증 


거의 끝났습니다. 마지막 단계는 OneGraph 끝점에 대해 사용자를 인증하는 것입니다. OneGraph 카탈로그의 모든 API에 대한 통합 접근 방식입니다. github를 값으로 사용하여 onegraph-auth의 .login 메서드를 사용합니다. 사용자가 로그인하면 <RepositoryList /> 구성 요소를 표시하여 그에 따라 상태를 조정합니다.


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 ( <div className="App"> <header className="App-header"> <p>GitHub Projects via OneGraph</p> <p> {isLoggedIn ? ( <RepositoryList/> ) : ( <button style={{fontSize: 18}} onClick={() => login()}> Login with YouTube </button> )} </p> </header> </div> ) } export default App 


결과 


최종 결과는 다음과 같습니다. 동일한 시각 효과를 위해 스타일 시트를 조정해야 할 수도 있습니다.


Final Result: List of GitHub repositories 

Hooks를 사용하여 React.js 애플리케이션을 만들었습니다. 프로젝트에는 최소한의 종속성이 있습니다. 최신 ECMASCript 모듈 접근 방식을 사용합니다. 패키지 관리자로 pnpm을 사용하므로 디스크 공간에서 효율적입니다. JavaScript / TypeScript 트랜스 파일은 Webpack 또는 Parcel보다 100-150 배 빠릅니다. urql이라는 간단하고 다양한 GraphQL 클라이언트를 사용합니다. 마지막으로, 통합 액세스 방법으로 인상적인 GraphQL API 카탈로그를 제공하는 메타 API 인 OneGraph를 통해 GitHub API에 액세스합니다. 최종 결과는 가볍고 현대적입니다.