Fullstack React and GraphQL : Apollo Client

세 개의 글 중 세 번째 글은 Apollo GraphQL 클라이언트로 풀스택 React와 GraphQL을 구축하는 데 초점을 맞췄습니다.

Apollo GraphQL 클라이언트로 React 애플리케이션 만들기

이 튜토리얼의 이 부분에서는 Apollo GraphQL 사용과 관련된 부분을 연결하도록 도와드리겠습니다. 여러분이 필요로 하는 대부분의 React 앱을 GitHub 저장소에 포함시켰습니다. 프로젝트에 복제하는 이 미리 만들어진 코드는 Create Rect 앱으로 빌드된 React 프로젝트이며 라우팅, 탐색, 메뉴, 반응형 동작, 상태 및 컨텍스트를 관리하고 기본 앱 아키텍처를 지원하는 일부 유틸리티 및 기타 컴포넌트를 포함합니다. Apollo GraphQL 클라이언트를 설정하는 것만 신경쓰고 싶었지만, 작동 중인 애플리케이션의 컨텍스트에서 이를 수행하고 싶었습니다.

기존 React 애플리케이션 복제

디커플링된 React 프론트엔드는 카우치베이스-gql-server 디렉토리 구조에 대한 기본적인 아이디어는 다음과 같습니다:

  rage-with-couchbase
  │   
  └───couchbase-gql-server
  │   
  └───react-apollo-client

분노-와 함께-카우치베이스

│

└───카우치베이스-gql-서버

│

└───반응-아폴로-클라이언트

루트에서 다음 git 명령어를 실행하여 React 프로젝트의 시작 지점을 복제해 보겠습니다(분노-위드-카우치베이스 디렉터리)의 터미널에 있습니다:

git clone https://github.com/httpJunkie/react-apollo-client.git && cd react-apollo-client && rm -rf .git

1	git 복제 https://github.com/httpJunkie/반응-아폴로-클라이언트.git && cd 반응-아폴로-클라이언트 && rm -rf .git

위의 명령에서는 .git 디렉터리에 복제된 프로젝트의 기존 git 히스토리를 가져오지 않으려는 것입니다. 원하는 경우 직접 git을 초기화하고 주기적으로 커밋해야 합니다. 작업 내용을 잃지 않도록 그렇게 하는 것이 좋습니다.

이제 기본 라우팅을 통해 프로젝트에 작동하는 React 애플리케이션이 추가되었습니다. React 프로젝트에 존재하지만 아직 연결되지 않은 컴포넌트와 유틸리티가 몇 가지 있습니다. 그것들을 다루기 전에 모든 것이 오류 없이 작동하는지 확인하기 위해 React 애플리케이션을 자체적으로 실행해 보겠습니다:

npm install && npm start

1	npm 설치 && npm 시작

콘솔을 엽니다(⌘ Cmd + ⌥ 옵션 + I Mac의 경우) (Ctrl + ↑ Shift + J PC에서)

홈에서 항공사로 이동할 때 오류가 발생하지 않는지, 오류나 주요 경고가 표시되지 않는지 확인하세요. 이 미리 보기에 표시된 것은 항공사 경로이며, 이 경로가 마스터 상세 기능을 추가할 경로입니다. 다른 사람이 이미 모든 스타일링과 기본 레이아웃을 처리한 것처럼, 우리가 할 일은 항공사 목록.jsx 그리고 airline-details.jsx 파일을 페이지 양쪽의 현재 플레이스홀더 텍스트 대신 사용할 수 있습니다. 다행히도 디자인 팀이 모든 레이아웃과 CSS 작업을 완료했습니다!

React 앱을 변경하기 전에 프로젝트에 있는 파일 중 아직 항공사 노선과 함께 사용되지 않는 몇 가지 파일을 이해해 보겠습니다.

자산 개요

우리가 익숙해지길 바라는 6개의 파일이 대기 중이며 사용을 기다리고 있습니다.

디렉토리 구조와 관련하여 우리가 사용하고 있는 규칙은 "경로" 디렉토리는 특정 경로를 형성하도록 해결된 React 컴포넌트이며, "부분" 디렉토리에 있는 컴포넌트는 경로에 의해 로드된 뷰가 아니라 애플리케이션에서 잠재적으로 재사용될 수 있는 부분 뷰 또는 컴포넌트입니다. 이것은 제가 사용하는 관습이지 React가 강제하는 것이 아닙니다.

위드아폴로프로바이더 - 가독성을 위해 상위 컴포넌트를 사용하고 있습니다. 이것은 ApolloProvider를 부모 컴포넌트로 가져오는 것과 비슷하다는 것을 이해하세요. 이것이 모범 사례는 아닐 수도 있지만 코드를 깔끔하게 유지한다는 점이 마음에 듭니다.

import React from 'react'
import { ApolloProvider, InMemoryCache, ApolloClient } from '@apollo/client';

const withApolloProvider = (WrappedComponent, graphqlEndpoint) => {
  const apolloClient = new ApolloClient({
    uri: graphqlEndpoint,
    cache: new InMemoryCache()
  })

  return (props) => (
    <ApolloProvider client={apolloClient}>
      <WrappedComponent {...props} wrappedBy={"withApolloProvider"} />
    </ApolloProvider>
  )
}

export default withApolloProvider

가져오기 React 에서 'react'

가져오기 { 아폴로 공급자, 인메모리 캐시, ApolloClient } 에서 '@apollo/client';

const 위드아폴로프로바이더 = (WrappedComponent, 그래프 쿼리 엔드포인트) => {

const apolloClient = new ApolloClient({

uri: 그래프 쿼리 엔드포인트,

캐시: new 인메모리 캐시()

})

반환 (소품) => (

<아폴로 공급자 클라이언트={apolloClient}>

</아폴로 공급자>

)

}

내보내기 기본값 위드아폴로프로바이더

우리는 항공사 목록.jsx 및 airline-details.jsx에서 이 두 구성 요소가 나란히 로드됩니다. airlines.jsx 컴포넌트입니다. 목록에는 각 항공사와 용도만 표시됩니다. pagination.jsx 를 클릭하면 페이지 왼쪽에 긴 목록이 표시되지 않도록 할 수 있습니다.

마지막으로 airline-gql.js 파일은 단순히 우리의 그래프QL 쿼리 에 대한 모든 영국 항공사의 쿼리를 저장합니다. 정리 목적으로 쿼리를 다른 파일로 분리하는 것을 좋아하는데 필수는 아니지만 airlines.jsx 파일을 만듭니다.

마스터-세부 페이지 작동 방식

우리 프로젝트에는 마스터-디테일 컴포넌트 관계(항공사 목록.jsx && airline-details.jsx)에서 /항공 경로로 이동합니다. 이 경로는 이름이 지정된 뷰 구성 요소로 확인됩니다: airlines.jsx를 사용하여 경로뿐만 아니라 추가 URI 매개변수(airlineId)를 경로 끝에 추가하여 구체적으로 지정할 수 있습니다. 특정 airlineId URI 매개변수가 URL에 존재합니다:

http://localhost:3000/airlines

왼쪽에는 항공사 목록만 표시됩니다. 또한 페이지 오른쪽에 다음과 같은 링크가 표시됩니다: "항공사 선택".

메뉴에서 항공사를 선택하면 페이지 오른쪽에 세부 정보가 로드됩니다. 클릭하면 리액트 라우터에서 제공하는 컴포넌트를 사용하여 적절한 ID로 URL을 업데이트합니다:

http://localhost:3000/airlines/1355

여기서 ID를 일치시킬 것입니다. 1355 를 React 애플리케이션 데이터에 이미 메모리에 있는 올바른 항공사로 설정하고 적절한 항공사 정보 "British Airways"를 표시합니다.

Apollo GraphQL 클라이언트에 대한 종속성 추가하기

세 가지 패키지가 필요합니다: @apollo/react-hooks, 아폴로-부스트및 그래프 쿼리를 프로젝트에 가져와서 cd 를 반응-아폴로-클라이언트 디렉토리를 실행하고 npm 설치 를 사용하여 GraphQL 및 Apollo에 필요한 패키지를 만들 수 있습니다:

npm install @apollo/client graphql

1	npm 설치 @아폴로/클라이언트 그래프 쿼리

Apollo 및 GraphQL에 익숙해지고 싶다면 쿼리용 GraphQL 문서를 참조하세요: 쿼리 작성에 대한 GraphQL 문서 를 사용할 수 있습니다.

마스터-세부 페이지 구축

그리고 airlines.jsx 파일에서 대부분의 작업을 수행할 것입니다. 몇 가지 가져오기를 추가하는 것부터 시작해 보겠습니다:

import { useQuery } from '@apollo/client'
import { airlineGql } from './airline-gql'

1 2	가져오기 { 사용 쿼리 } 에서 '@apollo/client' 가져오기 { 항공사Gql } 에서 './airline-gql'

아래에서 import { airlineGql } 줄을 가져와야 합니다. 위드아폴로프로바이더를 상위 구성 요소로 사용합니다.

import withApolloProvider from '../hoc/withApolloProvider'

1	가져오기 위드아폴로프로바이더 에서 '../hoc/withApolloProvider'

이렇게 하면 컴포넌트를 아폴로 프로바이더로 래핑합니다. 저는 전체 애플리케이션을 ApollloProvider로 래핑하는 대신 이 방법을 사용했습니다. 제가 공유하는 코드를 조금 덜 복잡하게 만들기 위한 시도입니다. 우리는 airlines.jsx 파일을 내보냅니다.

다음과 같은 줄이 표시됩니다:

기본 항공사 내보내기

로 변경해야 합니다:

const WrappedComponent = withApolloProvider(Airlines, 'http://localhost:4000/graphql')
export default WrappedComponent

1 2	const WrappedComponent = 위드아폴로프로바이더(항공사, 'http://localhost:4000/graphql') 내보내기 기본값 WrappedComponent

HOC에 대한 첫 번째 인수는 React 컴포넌트입니다. 항공사 (이 컴포넌트). 따라서 앱이 렌더링될 때 <Airlines /> 컴포넌트로 래핑됩니다. 아폴로 공급자. React의 프로바이더는 컨텍스트 API의 함수입니다. 컨텍스트는 프롭을 통해 수동으로 데이터를 전달할 필요 없이 React 애플리케이션의 컴포넌트 트리 전체에 데이터를 제공합니다. 우리의 경우 <Airlines /> 컴포넌트는 공급자로 래핑되어 해당 공급자에 정의된 Apollo 클라이언트 코드가 제공하는 데이터에 액세스할 수 있습니다. 위드아폴로프로바이더 상위 컴포넌트입니다.

최종적으로 가져온 것은 제가 이미 구축한 두 가지 컴포넌트입니다(항공사 목록.jsx 그리고 airline-details.jsx):

import AirlineList from '../partial/airline-list'
import AirlineDetails from '../partial/airline-details'

1 2	가져오기 항공사 목록 에서 '../partial/airline-list' 가져오기 항공사 세부 정보 에서 '../partial/airline-details'

이 두 파일을 가져오면 해당 컴포넌트 구문을 플렉스박스 그리드에 추가할 수 있습니다(간단한 플렉스박스 를 사용하여 페이지를 백분율로 쉽게 분할할 수 있도록 만들었습니다:

<Row horizontal="spaced">
  <Column flexGrow={1} style={{ minWidth: '280px', width: '65%' }}>
    <AirlineList airlines={airlines} />
  </Column>
  <Column flexGrow={1} style={{ width: '45%' }}>
    <AirlineDetails airline={airline} />
  </Column>
</Row>

<행 수평="spaced">

<칼럼 flexGrow={1} 스타일={{ 최소 너비: '280px', 너비: '65%' }}>

<항공사 목록 항공사={항공사} />

</칼럼>

<칼럼 flexGrow={1} 스타일={{ 너비: '45%' }}>

<항공사 세부 정보 항공사={항공사} />

</칼럼>

</행>

이 모든 것이 준비되었으니 이제 데이터를 다루기만 하면 됩니다. 사용 쿼리 는 Apollo GraphQL 클라이언트에서 다음과 같은 객체를 반환합니다. 로딩 중, 오류및 데이터 속성을 사용할 수 있습니다. 또한 경로의 경로(URL에서)를 일치시켜야 합니다. 이에 대한 접근은 React 라우터를 사용하면 쉽습니다: (match.params).

React 라우터의 일치 소품을 파괴하여 항공사 구성 요소::

const Airlines = ({ match }) => {

1	const 항공사 = ({ 일치 }) => {

다음으로, 최상위 레벨에 다음을 추가합니다. 항공사 컴포넌트:

const airlineId = Number(match.params.id)
  const { loading, error, data } = useQuery(airlineGql)

  if (loading) return <p>Loading...</p>
  if (error) return <p>Error :( <span style={{color: 'red'}}>{error.message}</span> )</p>

  const airlines = data.airlinesUK
  const airline = match.params.id ? airlines.find(a => a.id === airlineId) : null

const airlineId = 번호(일치.매개변수.id)

const { 로딩 중, 오류, 데이터 } = 사용 쿼리(항공사Gql)

만약 (로딩 중) 반환 로드 중...

if (오류) 반환 오류 :( {error.message}</s>pan> )

const 항공사 = 데이터.airlinesUK

const 항공사 = 일치.매개변수.id ? 항공사.찾기(a => a.id === airlineId) : null

우리가 방금 무슨 짓을 한 거죠?

설정 airlineId 가 match.params.id 는 숫자를 반환하고 정의되지 않음 (경로 경로에 ID가 있습니까?) /airlines/1355 여부 /항공/?).
에서 내보낸 GraphQL 쿼리 문자열을 사용하여 항공사Gql 파일을 삭제합니다. 파일을 반환하므로 여기에서도 파일을 삭제한다는 점을 기억하세요.
데이터 로드가 완료될 때까지 '로드 중'을 반환합니다.
GraphQL 서버가 실행 중이 아니거나 오류 등이 있는 경우 "오류"를 반환합니다...
쿼리에서 반환된 모든 항공사의 데이터를 다음과 같은 로컬 변수로 캡처합니다. 항공사
만약 match.params.id 에 숫자가 포함되어 있으면 경로에 ID가 포함되어 있음을 의미하며, 이 경우 특정 항공사의 데이터를 로컬 변수 항공사 그렇지 않으면 해당 변수에 null 값을 저장합니다.

그리고 일치 에서 경로를 설정하는 방식 때문에 작동합니다. App.js 페이지로 이동합니다:

<Route exact path={["/airlines/:id", "/airlines/"]}
  render={(props) => <Airlines {...props} />}
/>

<경로 정확한 경로={["/항공/:id", "/항공/"]}

렌더링={(소품) => <항공사 {...소품} />}

이 경로는 다음과 같이 표시됩니다: 다음과 같은 이름의 경로를 찾습니다. /항공/ 를 사용하여 사용할 수 있으며 그 이후의 모든 항목은 match.params.id 구문.

지금 프로젝트를 실행하는데 GraphQL 서버가 실행되고 있지 않으면 오류가 발생합니다.
"오류 :( 네트워크 오류: 가져오지 못함 )"

따라서 마스터-디테일 페이지를 테스트하기 위해 React 앱을 실행하기 전에 해당 서버를 시작해야 합니다.

전체 스택 애플리케이션 실행

풀스택 React 및 GraphQL 프로젝트를 실행하려면 먼저 패키지를 하나 더 추가해야 합니다:

npm install cors

1	npm 설치 cors

앱은 한 도메인(localhost:3000)에서 호스팅됩니다. 앱은 다른 도메인(localhost:4000)의 API에 요청합니다. CORS가 없으면 브라우저의 동일 출처 정책이 요청을 차단합니다.

CORS를 사용하면 API가 브라우저에 웹 앱이 요청을 해도 괜찮다고 알릴 수 있습니다. HTTP 헤더를 전송하여 이를 수행합니다. Express-GraphQL 서버에서 CORS를 사용해야 합니다. 다음 코드를 추가하여 기존의 처음 7줄을 대체하면 됩니다.

const express = require('express')
const cors = require('cors')
const graphqlHTTP = require('express-graphql')
const { buildSchema } = require('graphql')
  
const couchbase = require('couchbase')
  
const app = express()
app.use(cors())

const express = require('express')

const cors = require('cors')

const graphqlHTTP = require('express-graphql')

const { 빌드 스키마 } = require('graphql')

const 카우치베이스 = require('couchbase')

const 앱 = express()

앱.사용(cors())

CORS에 대해 처음부터 끝까지 자세히 알아보려면 다음 문서를 참조하세요.Express-GraphQL 및 Apollo 서버에 CORS를 활성화하는 방법”

이 시점에서는 Couchbase Server 인스턴스가 실행 중인지 확인하기만 하면 됩니다.

서버 디렉터리에서 node 명령을 실행하여 Express-GraphQL 서버를 시작합니다:

node server

노드 서버

다음으로 클라이언트 디렉토리에서 명령을 실행하여 React 클라이언트를 시작하겠습니다:

npm start

npm 시작

React 애플리케이션은 Express-GraphQL API에 연결하고, 다시 Couchbase 데이터베이스를 쿼리하여 항공사 데이터를 검색하며, 이제 방문하면 작동하는 앱이 있어야 합니다: localhost:3000

사후 설치 및 동시 사용

이제 모든 것이 작동하므로 하나의 npm 명령으로 두 프로젝트를 모두 실행하도록 프로젝트를 업데이트해 보겠습니다.

루트 디렉토리에 npm 프로젝트를 초기화해야 합니다. 서버와 클라이언트 모두 자체 프로젝트 디렉터리가 있습니다. 루트 디렉터리에 자체 package.json 종속성이 하나만 있는 파일입니다.

디렉터리를 루트로 변경하고 실행합니다:

npm init -y && npm install concurrently --save-dev

1	npm init -y && npm 설치 동시에 --저장-dev

이렇게 하면 npm이 초기화되고 모든 기본값을 허용합니다(그렇지 않으면 -y 플래그)를 설정하고 패키지를 설치하면 하나의 명령으로 두 프로젝트를 동시에 실행할 수 있습니다.

라는 두 개의 스크립트를 설정해 보겠습니다. 클라이언트 그리고 서버 를 사용하여 각 프로젝트를 개별적으로 실행한 다음 시작 스크립트를 사용하여 클라이언트와 서버를 동시에 실행할 수 있습니다.

또한 다음을 사용할 것입니다. 설치 후 를 실행하여 각 프로젝트의 npm 설치 스크립트를 독립적으로 실행할 때 루트의 npm 설치 가 완료되었습니다. 설치 후 의 일부입니다. npm 스크립트 를 기본값으로 설정합니다. 아래에서 변경한 모든 사항을 적용하면 다른 사람이 리포지토리를 복제하여 실행할 수 있습니다. npm 설치 && npm 시작 를 추가하면 세 개의 설치가 모두 시작되고 각 프로젝트가 동시에 실행됩니다.

교체 package.json 다음 스크립트로 추가되었습니다:

"scripts": {
    "client": "cd react-apollo-client && npm start",
    "server": "cd couchbase-gql-server && node server",
    "start": "concurrently --kill-others \"npm run server\" \"npm run client\"",
    "postinstall": "(cd couchbase-gql-server && npm install); (cd react-apollo-client && npm install);"
  },

"스크립트": {

"client": "cd react-아폴로-클라이언트 && npm 시작",

"서버": "cd couchbase-gql-server && 노드 서버",

"시작": "동시에 --kill-others \"npm run server\" \"npm 실행 클라이언트\"",

"postinstall": "(cd couchbase-gql-server && npm install); (cd react-apollo-client && npm install);"

프로젝트의 루트에서 npm을 초기화하고 다음 두 가지 스크립트를 설정했습니다. 클라이언트 그리고 서버 와 동시에 실행할 수 있는 npm 시작. 또한 누군가 리포지토리를 복제하면 이제 실행할 수 있습니다: npm 설치 && npm 시작 를 실행하면 세 프로젝트의 모든 패키지를 설치한 후 스핀업하므로 Couchbase Server가 실행 중이기만 하면 모두 작동합니다.

서버 파일에서 사용자 및 패스 제거

마지막 단계는 Couchbase 연결 자격 증명의 사용자 이름과 비밀번호를 .env 파일에 저장합니다. 이렇게 하면 전 세계가 볼 수 있도록 민감한 자격 증명을 GitHub로 전송하지 않게 됩니다.

디렉터리를 다음과 같이 변경합니다. couchbase-gql-server/ 를 클릭하고 설치 dotenv:

npm install dotenv --save-dev

1	npm 설치 dotenv --저장-dev

다음으로 가져오기 dotenv 에서 설정한 변수에 액세스하기 위해 객체 파괴를 사용합니다. .env file:

require('dotenv').config()
const { cbUser, cbPass } = process.env

1 2	require('dotenv').구성() const { cbUser, cbPass } = 프로세스.환경

사용자 아이디와 비밀번호를 사용하는 코드를 업데이트합니다:

const cluster = new couchbase.Cluster('couchbase://localhost', { 
  username: cbUser, password: cbPass 
})

const 클러스터 = new 카우치베이스.클러스터('couchbase://localhost', {

사용자 이름: cbUser, 비밀번호: cbPass

})

파일 만들기 카우치베이스-gql-server 디렉토리에 .env Couchbase 서버 자격 증명으로 로그인합니다:

cbUser=Administrator
cbPass=password

1 2	cbUser=관리자 cbPass=비밀번호

또한 서버 디렉터리도 업데이트해야 합니다. .gitignore 파일로 이동합니다. 라벨이 붙은 무시 블록이 있습니다. #기타을 클릭한 후 해당 무시 블록을 수정하고 다음을 추가해 보겠습니다. .env 를 추가합니다. 이 파일은 코스 컨트롤의 일부로 git에 업로드되지 않는다는 점을 기억하세요.

# misc
.DS_Store
.env
.env.local
.env.development.local
.env.test.local
.env.production.local

# 기타

.DS_Store

.env

.env.local

.env.development.local

.env.test.local

.env.production.local

다음을 사용하여 루트에서 프로젝트를 실행해 보겠습니다. npm 시작 모든 것이 여전히 작동하는지 확인합니다!

프로젝트 요약

풀스택 React 및 GraphQL 프로젝트를 설정했습니다. 활용하기 카우치베이스 노드 SDK 를 통해 자바스크립트에 대한 지식을 활용하여 풀스택 앱을 구축할 수 있습니다. 이 튜토리얼이 풀스택 자바스크립트를 지배하는 데 도움이 되길 바랍니다.

트위터에서 사용 가능 @httpJunkie제 DM은 항상 열려 있으니 언제든지 연락주세요! 아래 링크를 통해 Apollo 및 React를 사용한 빌드에 대한 자세한 정보를 확인하세요.

이 프로젝트의 최종 코드는 GitHub에서 확인할 수 있습니다:
github.com/httpJunkie/rage-with-couchbase-final

Apollo 및 React 리소스

에릭 비샤드

Platform

Self-Managed

Services

Capabilities

Why Couchbase?

Migrate to Capella

By Use Case

By Industry

By Application Need

Popular Docs

By Developer Role

Quickstart

Resource Center

About

Partnerships

Our Services

Partners: Register a Deal

Ready to register a deal with Couchbase?

Marriott

모든 게시물

풀스택 React 및 GraphQL : Apollo 클라이언트