ExpressJS와 Apollo 서버를 사용하여GraphQL 서버를 만드는 방법

본고에서 ExpressJS와 Apollo Server를 사용하여GraphQL 서버를 만드는 방법을 보여 드리겠습니다.

프로젝트 폴더를 열고 Apollo Server 및 Express 설치

mkdir graphql-server-playground
cd graphql-server-playground
npm init -y

package.json 파일은 이렇습니다.

{
  "name": "graphql-server-playground",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

필요한 경우 설명, 키워드 및 작성자를 추가할 수 있습니다.
Express 및 Apollo Server를 설치하려면 다음 개발자 종속성 설치

@babel/cli

@babel/core

@babel/node

@babel/preset-env

nodemon

npm install --save-dev @babel/cli @babel/core @babel/node @babel/preset-env nodemon

다음 종속성

apollo-server-express

express

graphql

그래픽 가져오기

graphql-tools

npm install apollo-server-express express graphql graphql-import graphql-tools

현재 프로젝트의 루트 폴더에 src 폴더와 그 중의 index.js 파일을 만듭니다

import express from 'express';
import { ApolloServer, gql } from 'apollo-server-express';

const typeDefs = gql`
  type Query {
    hello: String
  }
`;

const resolvers = {
  Query: {
    hello: () => 'Hello world!',
  },
};

const server = new ApolloServer({ typeDefs, resolvers });

const app = express();
server.applyMiddleware({ app });

app.listen({ port: 4001 }, () =>
  console.log(`🚀 Server ready at http://localhost:4001${server.graphqlPath}`)
);

업데이트 package.json 파일

{
  ...
  "main": "src/index.js",
  "scripts": {
    "start": "nodemon --exec babel-node -- ./src/index.js"
  },
  ...
}

Nodemon is a tool that helps develop node.js based applications by automatically restarting the node application when file changes in the directory are detected.

서버를 실행하기 전에 프로젝트의 루트 폴더에 .babelrc 파일을 만들어야 합니다

{
  "presets": ["@babel/preset-env"]
}

이 파일은 NodeJS에 Babel 7을 사용하고 브라우저에 코드를 전송해야 한다는 것을 알려줍니다.npm start으로 서버 시작

npm start

> [email protected] start graphql-server-playground
> nodemon --exec babel-node -- ./src/index.js

[nodemon] 2.0.7
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): *.*
[nodemon] watching extensions: js,mjs,json
[nodemon] starting `babel-node ./src/index.js`
🚀 Server ready at http://localhost:4001/graphql

GraphQL 서버가 현재 컴퓨터에서 실행 중입니다. 주소는 http://localhost:4001/graphql입니다.

놀이터

운동장은 조회를 실행하고 문서나 패턴을 검사할 수 있는 곳입니다.



현재 유일하게 사용할 수 있는 조회는 다음과 같다

query {
  hello
}

코드에서 보듯이 이것은

const typeDefs = gql`
  type Query {
    hello: String
  }
`;

각 쿼리에는 resolver이 있어야 합니다.해석기는 조회가 내용을 되돌려주는 함수를 정의한다

const resolvers = {
  Query: {
    hello: () => 'Hello world!',
  },
};

이 예에서 hello 검색의 해상도는 문자열 Hello world!을 되돌려줍니다
GraphQL 쿼리 및 파서에 대한 자세한 내용은 here을 참조하십시오.

정의 모드

모델을 정의하기 전에, 우리는 서버가 클라이언트에게 어떤 데이터를 제공할지 결정해야 한다.
예를 들어, 우리는 통신부에 관한 정보를 저장하고 제공하기를 바란다.그래서 내가 원하는 데이터는 이름, 전화번호, 이메일 주소가 있는 사람들의 목록이다.아직 진정한 데이터베이스가 없기 때문에 index.js 파일에서 시뮬레이션을 해보도록 하겠습니다.

...
const persons = [
    {
        id: 1,
        name: "Ash Ketchum",
        phone_number: "+440000000000",
        email: "[email protected]",
    },
    {
        id: 2,
        name: "Professor Oak",
        phone_number: "+441111111111",
        email: "[email protected]",
    },
    {
        id: 3,
        name: "Gary Oak",
        phone_number: "+442222222222",
    },
];
...

이것은 우리의 임시 데이터베이스가 될 것이다.
현재 모드:

const typeDefs = gql`
  type Person {
      id: Int!
      name: String!
      email: String
  }
  type Query {
    person(id: Int!): Person
  }
`;

자세히 봅시다.
데이터 구조를 이미 정의했기 때문에 데이터베이스에서 수신되는 데이터는 다음과 같은 형태가 될 것이라고 우리는 매우 확신한다.

id:Int!(정수, 공백 불가)

이름: 문자열!(문자열, 공백 불가)

이메일: String(문자열, 공백 가능)

조회 person(id: Int!): Person은 인자로 id가 필요합니다. (이 id는 비워둘 수 없습니다. 비워둘 수 없습니다. 그렇지 않으면 우리는 어떤 내용도 검색할 수 없습니다.)Person 유형에 의해 정의된 Person을 반환합니다.우리가 검색한 사람이 데이터베이스에 없을 수 있기 때문에, 이 검색의 반환 형식은null입니다. (이것은 null을 반환할 수 있습니다.)
우리 는 운동장 에서 조회 를 운행할 것 이다

query {
  person(id: 1) {
    id
    name
    email
  }
}

새 질의 작성

const typeDefs = gql`
  ...
  type Query {
    ...
    persons: [Person]!
  }
`;

const resolvers = {
  Query: {
    ...
    persons: (_, __, ___) => persons,
  },
};

아주 직설적이죠?새 조회 persons은 전체 persons의 그룹을 되돌려줍니다.우리 는 운동장 에서 새로운 조회 를 운행할 것 이다

돌연변이를 쓰다

Mutation은GraphQL에서 데이터를 생성, 업데이트 및 삭제하는 데 사용되는 함수입니다.만약 CRUD에 있다고 생각한다면, 돌연변이는 C (생성) U (업데이트) D (요소) 를 대표한다.
새로운 유형 PersonInput과 다른 루트 유형 Mutation을 만듭니다.

const typeDefs = gql`
  ...
  input PersonInput {
    id: Int!
    name: String!
    email: String
  }
  type Mutation {
    createPerson(person: PersonInput!): Person
  }
`;

함수 createPerson은 PersonInput 유형의 빈 대상이 될 수 없음을 받아들이고 Person 유형의 다른 대상을 되돌려줍니다.이것은 단지 하나의 예일 뿐이다. Person과 PersonInput 두 종류는 같다.
그러면 돌변은 좀 비슷해요.

const resolvers = {
  ...
  Mutation: {
    createPerson(_, { person }, __) => {
      persons.push(person);
      return person;
    },
  },
};

간단하게 보기 위해서, 우리는 수동으로 ID를 입력하고, 같은 ID를 두 번 다시 사용하지 않도록 주의한다. (그렇지 않으면 조회 person이 의외로 두 결과를 되돌려줄 것이다.)
운동장에서 돌연변이를 사용하래요.

mutation {
  createPerson(person: {id: 5, name: "Brock", email: "[email protected]"}) {
    id
    name
    email
  }
}

우리는 또한 persons 조회를 실행하여 인원 리스트가 어떻게 업데이트되었는지 볼 수 있다

저희가 사용하는 대상은 임시 데이터베이스입니다. 서버를 다시 시작하면 변형을 통해 추가/변경/삭제된 데이터를 잃어버리게 됩니다.조금만 버티고 싶으면 connecting the GraphQL server to a data source을 생각해 보세요.본문에서 나는 이렇게 하지 않을 것이다.

Prettier로 코드 스타일 개선

더 예쁜 거 설치.

npm install prettier --save-dev

업데이트 package.json 파일은 다음과 같습니다.

"scripts": {
  ...
  "prettier": "prettier --write ."
},

프로젝트의 루트 폴더에 파일 생성 .prettierrc.json

{
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": false,
  "singleQuote": true
}

이 파일에는 코드에 적용할 Prettier 구성 및 규칙이 포함되어 있습니다.
두 번째 파일 .prettierignore을 만들고 붙여넣은 내용을 복사합니다.이 파일은 코드를 포맷할 때 어떤 파일을 무시하는지 Prettier에게 간단하게 알려 줍니다.
현재, .gitignore을 실행하면 루트 디렉터리와 하위 디렉터리의 모든 파일에 포맷 규칙을 적용합니다.너는 이걸 바꿀 수 있어.

"prettier": "prettier --write ."

가지다

"prettier": "prettier --write ./src/**"

이 경우 Prettier는 npm run prettier 폴더와 하위 폴더의 파일을 포맷합니다.

이것은 소포이다

이렇게, 너는 성공했어!현재 로컬에서 실행되는GraphQL 서버와 매우 유용한 조회를 수행할 수 있는 플랫폼이 있습니다!🚀
다음은 본고 https://github.com/rossanodan/graphql-server-playground에서 작성한 모든 코드의 저장소입니다.너는 그것을 마음대로 사용해서 자신의 템플릿이나 템플릿으로 삼을 수 있다.