Fullstack React and GraphQL : Express Server

세 개의 글 중 두 번째 글은 Express와 Couchbase Server로 풀스택 React와 GraphQL을 구축하는 데 초점을 맞췄습니다.

Express를 사용한 GraphQL

GraphQL에 익숙하지 않다면 몇 분 정도 시간을 내어 GraphQL 설명서를 읽어보세요. 다음 페이지가 좋은 시작점이 될 것입니다:

전제 조건

노드 v10.x 이상
npm v5.x 이상
git v2.14.1 이상

프로젝트 구조 만들기

프로젝트를 위해 컴퓨터에서 디렉터리를 만들어야 합니다. 분노-위드-카우치베이스:

mkdir rage-with-couchbase && cd $_

1	mkdir 분노-와 함께-카우치베이스 && cd $_

mkdir 문자열을 사용하여 새 디렉터리를 생성합니다. 분노-위드-카우치베이스 폴더의 이름에 대해 bash는 해당 문자열을 즉시 사용할 수 있는 변수에 저장합니다. $_.

를 사용하여 디렉토리를 변경합니다. $_ 를 사용하여 연결된 명령의 디렉터리 철자를 잘못 입력하지 않도록 합니다(bash 마법입니다).

이제 .gitignore 파일을 프로젝트 루트에 추가합니다.

touch .gitignore && echo "/node_modules/*" >> .gitignore

1	터치 .gitignore && echo "/node_modules/*" >> .gitignore

터치 는 .gitignore 파일을 모두 무시하고 node_modules 디렉터리와 하위 디렉터리에 저장합니다. 이는 풀스택 React 및 GraphQL 데모 프로젝트의 일부로 루트에서 git 변경 사항을 추적할 것이므로 중요합니다. 분노-위드-카우치베이스 디렉토리를 사용하지만, 서버와 클라이언트 디렉토리는 각각 고유한 package.json 그리고 node_modules 디렉터리로 이동합니다.

echo 를 추가하면 node_modules/ 텍스트 내부의 .gitignore 파일을 모두 무시하는 역할을 합니다. node_modules 디렉터리와 모든 하위 디렉터리를 삭제합니다.

Express 서버 만들기

이제 Express 서버를 저장할 디렉토리를 생성하고 npm을 사용하여 패키지를 관리하겠습니다.

mkdir couchbase-gql-server && cd $_ && npm init -y

1	mkdir 카우치베이스-gql-서버 && cd $_ && npm init -y

mkdir 문자열을 사용하여 프로젝트 루트 내에 서버 전용으로 새 폴더를 생성합니다. 카우치베이스-gql-server 이름은 서버 프로젝트 디렉터리입니다.

디렉토리를 변경하고 $_ (더 많은 마법)을 초기화한 다음 npm 프로젝트를 사용하여 npm init -y 를 사용하여 기본값을 수락하면 -y 플래그.

Express 서버 종속성 설치

npm install graphql express express-graphql couchbase && npm install nodemon -D && code .

1	npm 설치 그래프 쿼리 express express-그래프 쿼리 카우치베이스 && npm 설치 노데몬 -D && 코드 .

설치가 완료되면 선택한 편집기로 프로젝트를 열어야 합니다. 저는 VS Code를 선호합니다.

GraphQL 서버 만들기

touch server.js .gitignore && echo "/node_modules/*" >> .gitignore

1	터치 서버.js .gitignore && echo "/node_modules/*" >> .gitignore

요구 사항 express/express-graphql/graphql 에서 server.js file:

const express = require('express')
const { graphqlHTTP } = require('express-graphql')
const { buildSchema } = require('graphql')
    
const couchbase = require('couchbase')

const express = require('express')

const { graphqlHTTP } = require('express-graphql')

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

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

처음 세 번의 가져오기는 GraphQL 서버에 필요하고 마지막 가져오기는 Couchbase 서버에 연결하고 쿼리하는 데 필요합니다.

Express 초기화 및 버킷에 연결하기

다음 코드를 추가합니다:

const app = express()
const cluster = new couchbase.Cluster('couchbase://localhost', { 
  username: 'Administrator', password: 'password' 
})
const bucket = cluster.bucket('travel-sample')
var collection = bucket.defaultCollection();

const 앱 = express()

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

사용자 이름: '관리자', 비밀번호: 'password'

})

const 버킷 = 클러스터.버킷('travel-sample')

var 컬렉션 = 버킷.기본 컬렉션();

위에서는 Couchbase Server 클러스터에 연결하고, 설정한 사용자로 인증한 다음, 우리의 여행 샘플 버킷을 사용하세요. 프로덕션 애플리케이션에서는 기본 사용자 이름과 비밀번호를 사용하지 마세요.

GraphQL 스키마 만들기

아래 코드를 추가하면 GraphQL 서버가 Couchbase Server 버킷 내부의 문서에서 데이터를 액세스하고 검색할 수 있는 두 개의 엔드포인트를 정의할 수 있습니다.

const schema = buildSchema(`
  type Airline {
    id: Int,
    callsign: String,
    country: String,
    iata: String,
    icao: String,
    name: String,
    type: String
  }
  input AirlineInput {
    callsign: String,
    country: String,
    iata: String,
    icao: String,
    name: String,
    type: String
  }
  type Query {
    airlinesUK: [Airline],
    airlineByKey(id: Int!): Airline
    airlinesByRegion(region: String!): [Airline]
  }
  type Mutation {
    updateAirline(id: Int!, input: AirlineInput): Airline
  }

const 스키마 = 빌드 스키마(`

유형 항공사 {

id: Int,

콜사인: 문자열,

국가: 문자열,

iATA: 문자열,

icao: 문자열,

이름: 문자열,

유형: 문자열

}

입력 항공사 입력 {

콜사인: 문자열,

국가: 문자열,

iATA: 문자열,

icao: 문자열,

이름: 문자열,

유형: 문자열

}

유형 쿼리 {

airlinesUK: [항공사],

항공사별 키(id: Int!): 항공사

항공사지역별(지역: 문자열!): [항공사]

}

유형 돌연변이 {

업데이트 항공사(id: Int!, 입력: 항공사 입력): 항공사

}

그리고 쿼리 유형은 어떤 GraphQL 쿼리 클라이언트는 자체 데이터 그래프에 대해 실행할 수 있습니다.

이를 통해 정의된 두 가지 엔드포인트가 있습니다. 쿼리. 하나는 "airlinesUK"이고 다른 하나는 "airlineByKey"입니다. React 앱에서는 "airlinesUK" 엔드포인트만 사용하겠습니다. 저는 단순히 키로 단일 Couchbase 문서를 검색하는 예제를 보여주기 위해 "airlineByKey" 엔드포인트를 만들었습니다. 이 작업은 N1QL 쿼리 언어를 사용하지 않으므로 추가 오버헤드가 없습니다. API를 구축하는 관점에서 각각의 사용 시기와 위치를 이해하는 것이 중요하므로 키로 가져올 수 있는 단일 문서를 반환하기 위해 N1QL 쿼리를 사용하고 싶지 않을 것입니다.

GraphQL 코드에는 다음과 같은 유형의 객체가 있습니다. 항공사. 이 객체는 카우치베이스에 있는 문서 구조를 모델링합니다. 여행 샘플 버킷에서 유형이 "항공사"인 경우.

다음으로 "airlinesUK". 이 엔드포인트의 반환 값은 Airline의 배열입니다: [항공사]. 즉, 항공사 목록을 다시 가져올 것입니다.

또한 "항공사별 키" 엔드포인트를 가져올 단일 항공사.

위의 버킷 이미지를 기억하신다면, 각 문서는 다음과 같은 형식의 키로 정의됩니다. airline_1234 어디 1234 는 id 항공사의

우리는 이것을 지킬 것입니다 id 를 사용하여 개별적인 항공사별 키 간단한 bucket.get() 메서드를 사용합니다.

각 엔드포인트에 대한 리졸버 구현 만들기

이제 GraphQL-Express API에서 두 개의 쿼리를 정의했으므로 스키마 객체에서 데이터를 검색하려면 자바스크립트로 구현해야 합니다.

우리가 만들 React 애플리케이션에는 N1QL 쿼리 이름 airlinesUK.

하지만 다음과 같은 방법으로 쿼리하는 방법을 보여드리고 싶었습니다. N1QL 키만 사용하여 NodeJS SDK의 API를 사용하거나 지역(미국/영국 등)을 사용하도록 확장하는 것, 즉 항공사별 키 그리고 항공사별 지역 구현.

다음 코드를 server.js 파일에 대한 N1QL 쿼리입니다:
(JS 코드에서 백슬래시로 백틱을 이스케이프 처리해야 합니다.)

// Define N1QL Queries
const airlinesUkQuery = `
  SELECT airline.* 
  FROM `travel-sample` AS airline 
  WHERE airline.type = 'airline'
  AND airline.country = 'United Kingdom'
`
const airlinesByRegionQuery = `
  SELECT airline.* 
  FROM `travel-sample` AS airline 
  WHERE airline.type = 'airline'
    AND airline.country = $REGION
`

// N1QL 쿼리 정의

const 항공사우크 쿼리 = `

선택 항공사.*

FROM `여행-샘플` AS 항공사

어디 항공사.유형 = '항공사'

AND 항공사.국가 = 'United Kingdom'

const 지역별 항공사 쿼리 = `

선택 항공사.*

FROM `여행-샘플` AS 항공사

어디 항공사.유형 = '항공사'

AND 항공사.국가 = $지역

다음 코드를 server.js 파일에 저장합니다:

const root = {
  airlinesUK: async () => {
    const result = await cluster.query(airlinesUkQuery)
    return result.rows
  },
  /*
    query getAirlinesUK {
      airlinesUK {
        id
        name
        callsign
        country
        iata
        icao
      }
    }
  */
  airlinesByRegion: async ({region}) => {
    const options = { parameters: { REGION: region } }
    const result = await cluster.query(airlinesByRegionQuery, options)
    return result.rows
  },
  /*
    query getAirlinesByRegion($region: String!) {
      airlinesByRegion(region:$region) {
        id
        name
        callsign
        country
        iata
        icao
      }
    }
    {
      "region": "{{country}}"
    }
  */
  airlineByKey: async ({id}) => {
    const result = await collection.get(`airline_${id}`)
    return result.value
  },
  /*
    query getAirlineByKey($id: Int!) {
      airlineByKey(id:$id) {
        id
        name
        callsign
        country
        iata
        icao
      }
    }
    {
      "id": {{id}}
    }
  */
  updateAirline: async ({id, input}) => {
    const result = await collection.get(`airline_${id}`)

    const newDocument = {
      ...result.content, 
      callsign: input.callsign ? input.callsign : result.value.callsign,
      country: input.country ? input.country : result.value.country,
      iata: input.iata ? input.iata : result.value.iata,
      icao: input.icao ? input.icao : result.value.icao,
      name: input.name ? input.name : result.value.name,
    };

    console.log(newDocument)

    await collection.upsert(`airline_${id}`, newDocument)
    return newDocument
  }
  /*
    mutation updateExistingAirline($id:Int!, $input:AirlineInput) {
      updateAirline(id:$id, input:$input){
        callsign
        country
        iata
      }
    }
    {
      "id": 112,
      "input": {
        "callsign": "FLYSTAR",
        "country": "United Kingdom"
      }
    }
  */
}

const root = {

airlinesUK: 비동기 () => {

const 결과 = 기다림 클러스터.쿼리(항공사우크 쿼리)

반환 결과.행

쿼리 getAirlinesUK {

airlinesUK {

이름

콜사인

국가

iATA

icao

}

항공사지역별: 비동기 ({지역}) => {

const 옵션 = { 매개변수: { 지역: 지역 } }

const 결과 = 기다림 클러스터.쿼리(지역별 항공사 쿼리, 옵션)

반환 결과.행

쿼리 getAirlinesByRegion($region: String!) {

airlinesByRegion(region:$region) {

이름

콜사인

국가

iATA

icao

}

{

"region": "{{국가}}"

}

항공사별 키: 비동기 ({id}) => {

const 결과 = 기다림 컬렉션.get(`airline_${id}`)

반환 결과.값

쿼리 getAirlineByKey($id: Int!) {

airlineByKey(id:$id) {

이름

콜사인

국가

iATA

icao

}

{

"id": {{id}}

}

업데이트 항공사: 비동기 ({id, 입력}) => {

const 결과 = 기다림 컬렉션.get(`airline_${id}`)

const 새로운 문서 = {

...결과.콘텐츠,

콜사인: 입력.콜사인 ? 입력.콜사인 : 결과.값.콜사인,

국가: 입력.국가 ? 입력.국가 : 결과.값.국가,

iATA: 입력.iATA ? 입력.iATA : 결과.값.iATA,

icao: 입력.icao ? 입력.icao : 결과.값.icao,

이름: 입력.이름 ? 입력.이름 : 결과.값.이름,

};

콘솔.로그(새로운 문서)

기다림 컬렉션.업서트(`airline_${id}`, 새로운 문서)

반환 새로운 문서

}

변이 updateExistingAirline($id:Int!, $input:AirlineInput) {

updateAirline(id:$id, input:$input){

콜사인

국가

iATA

}

{

"id": 112,

"입력": {

"콜사인": "FLYSTAR",

"국가": "영국"

}

참고: 위의 N1QL 문에서 FROM 줄의 백틱을 이스케이프 처리해야 합니다. 여행 샘플 를 백슬래시로 대체할 수 있습니다. 블로그의 코드 샘플에는 백슬래시가 표시되어 있지 않지만, 백슬래시는 존재하며 최종 소스 코드

이해를 돕기 위해 두 가지 다른 방법을 사용하여 Couchbase 서버를 쿼리하고 있습니다.

첫 번째 방법은 airlinesUK 엔드포인트가 그 리졸버입니다. 우리는 약속을 반환해야 하며 내부에서는 bucket.query를 사용하여 가독성을 위해 문 변수에서 한 줄씩 분리한 사전 정의된 N1QL 쿼리를 실행할 수 있습니다. 이러한 유형의 SQL 쿼리를 실행할 수 있다는 것은 문서 데이터베이스에 매우 강력합니다. 우리가 알고 있는 많은 SQL이 그대로 옮겨오기 때문에 새로운 API와 쿼리 언어를 배워야 하는 다른 문서 데이터베이스에 비해 큰 도움이 됩니다.

두 번째 방법은 airlinesUK 엔드포인트가 그 리졸버입니다. 우리는 약속을 반환해야 하며 내부에서는 bucket.get 메서드를 사용하며, 이 경우에는 문서의 키를 정의하는 것입니다. 키-값 데이터 저장소를 사용할 때의 좋은 점 중 하나는 오버헤드가 거의 없이 단일 문서를 쉽게 선택할 수 있다는 점입니다.

위의 각 메서드도 쿼리 오류를 테스트하고 결과 또는 오류.

Express Server로 GraphQL 생성

이제 엔드포인트와 쿼리에 대한 모든 것이 정리되었으므로 이제 해야 할 일은 다음과 같습니다. 사용 Express 서버를 생성하고 실행할 포트를 제공하겠습니다.

끝에 다음 코드를 추가합니다. server.js file:

/*  
  The graphqlHTTP function accepts a schema, rootValue and graphiql 
    among other options for configuring our GraphQL Server 
*/
const serverPort = 4000
const serverUrl = '/graphql'
app.use(serverUrl, graphqlHTTP({
  schema: schema,
  rootValue: root,
  graphiql: true
}))

app.listen(
  serverPort, 
  () => console.log(`GraphQL server running: https://localhost:${serverPort}${serverUrl}`)
)

graphqlHTTP 함수는 스키마, rootValue 및 graphiql을 허용합니다.

GraphQL 서버를 구성하는 여러 옵션 중에서

const 서버포트 = 4000

const serverUrl = '/graphql'

앱.사용(serverUrl, graphqlHTTP({

스키마: 스키마,

rootValue: root,

graphiql: true

}))

앱.듣기(

서버포트,

() => 콘솔.로그(`GraphQL 서버 실행 중: https://localhost:${서버포트}${서버Url}`)

)

Express 또는 Express-GraphQL 서버를 생성해 본 적이 있다면 이 코드가 익숙하게 보일 것입니다.

먼저 포트와 GraphQL URL을 설정합니다.

다음으로 GraphQL 스키마와 해당 리졸버를 전달하고 graphiql 옵션을 true로 설정합니다. (이렇게 하면 다음에서 GraphQL 쿼리를 테스트할 수 있는 IDE가 제공됩니다. localhost:4000/graphql.

마지막으로 포트 4000에서 수신 대기하고 콘솔에서 서버가 실행 중임을 나타내는 메시지를 설정합니다.

서버를 실행하고 Couchbase를 확인해 보겠습니다:

node server

노드 서버

GraphQL 서버가 실행되면 다음을 테스트할 수 있습니다. AirlinesUK 쿼리를 생성하려면 다음 코드를 GraphQL IDE 쿼리 창에 붙여넣으세요:

query getAirlinesUK{
  airlinesUK {
    id
    name
    callsign
    country
    iata
    icao
  }
}

쿼리 getAirlinesUK{

airlinesUK {

이름

콜사인

국가

iATA

icao

}

쿼리에서 알 수 있듯이 영국에 본사를 둔 모든 항공사를 검색합니다:

다음으로 항공사별 키 엔드포인트의 경우, 이 예제에서는 쿼리 변수를 만들어 각 창에 붙여넣어야 합니다:

query getAirlineByKey($id: Int!) {
  airlineByKey(id:$id){
    id
    name
    callsign
    country
    iata
    icao
  }
}

쿼리 getAirlineByKey($id: Int!) {

항공사별 키(id:$id){

이름

콜사인

국가

iATA

icao

}

{
  "id": 112
}

{

"id": 112

}

그리고 이를 통해 다시 쿼리하여 하나의 항공사 문서를 키로 검색할 수 있습니다:

매우 간단한 GraphQL API 설정으로 다음을 수행할 수 있습니다. 리액트 애플리케이션 만들기 목록 구성 요소에 영국 항공사를 사용하여 마스터 상세 페이지에 이러한 엔드포인트를 사용하고 특정 항공사를 클릭하면 다른 구성 요소가 페이지 오른쪽에 해당 항공사의 전체 세부 정보를 표시합니다.

React에서 Apollo GraphQL 클라이언트 만들기 (3부)

에릭 비샤드

이 문서 공유하기

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 : Express 서버

Express를 사용한 GraphQL

전제 조건

프로젝트 구조 만들기

Express 서버 만들기

Express 서버 종속성 설치

GraphQL 서버 만들기

Express 초기화 및 버킷에 연결하기

GraphQL 스키마 만들기

각 엔드포인트에 대한 리졸버 구현 만들기

Express Server로 GraphQL 생성

받은 편지함에서 카우치베이스 블로그 업데이트 받기

Author

Posted by 에릭 비샤드

댓글 남기기 응답 취소

카우치베이스 카펠라를 시작할 준비가 되셨나요?

구축 시작

카펠라 무료 사용

연락하기