Apollo+MongodB를 이용해서 최소한의 사용법을 배웠어요.

이번 목적

graphiQL과db의 연결 학습

Monngodb atlas 사용

나는 백엔드의 초보자들에게 배우게 하기 위해 한 것이다.더 좋은 문법이 있다면 가르쳐 주세요!

Apollo Server 및 express에서 서버 설정

1. 먼저 원하는 디렉터리로 파일, 폴더 만들기

yarn init

//yarn이든 npm이든 모두 가능하며 앞으로 yarn에서 진행될 것입니다.
디렉토리 구성은 다음과 같습니다.

package.json
server/
 ├ index.js
 └ graphql/
     ├ resolvers/test.js
     └ schema/test.js

2.필요한 모듈을 설치합니다.

yarn add express apollo-server-express nodemon graphql

이번에는express와apolloServer를 설치하여graphiql를 사용합니다.
또한 파일이 변경됨에 따라 서버가 다시 시작되며 변화에 대응하기 위해nodemon을 설치합니다.
3. 노드몬에게 감시를 시킨다.
nodemon이 파일의 변경을 감시하기 위해 패키지입니다.제이슨을 고쳐 쓰겠습니다.

// package.json
{
.......
"main":"./server"
.......
"scripts":{
	"start":"nodemon -e js,json"
  }
}

이렇게, 서버/index.js가 실행되고 js와 json이 감시됩니다.
4. Apollo Server를 세웁니다.
express의 중간부품을 이용하여 Apollo 서버를 만듭니다.
어쨌든 임시 리소스, schema를 먼저 만들어요.

// server/index.js

const { ApolloServer, gql } = require("apollo-server-express")
const express = require("express")
// 仮のschemaの作成
const typeDefs = gql`
  type Query {
    hello: String
  }
`

// 仮のresolversの作成
const resolvers = {
  Query: {
    hello: () => "Hello world"
  }
}

// expressアプリケーションの作成
const app = express()
const server = new ApolloServer({ typeDefs, resolvers })
// expressにミドルウェアを追加する
server.applyMiddleware({ app })

// ルートを設定
app.get("/", (req, res) => res.end("welcome"))
// 特定のルートでlistenする
app.listen({ port: 4000 }, () =>
  console.log(`graphQL ServerRunnig http://localhost:4000${server.graphqlPath}`)
)

5.서버가 시작되면 일어나는 플레이 그라운드에서 Hello World가 돌아올지 확인합니다
먼저 터미널에서 다음 명령을 실행합니다

yarn start

지정한 포트로 이동 (이번에는 localhost:4000
"welcome"로 표시되며 localhost:4000/graphql로 이동하면graphiql의 Play Ground가 시작됩니다
Play Ground에서

query {
  hello
}

을 입력하고 실행하면 resolvers에서 지정한 Hello world가 되돌아옵니다.
지금까지 기본적으로 서버의 시작 부분입니다.

mongodB atlas를 사용하여 서버에 연결

1.atlas에서 연결용 코드 가져오기
atlas의 초기 설정 부분을 건너뛰십시오.
Claster의 SANDBOX에 대한 connect를 선택합니다.

두번째
Add your connection string into your application code
코드를 복사해 주세요.env 서류에 기입하다.

// .env
URL = mongodb+srv://******:<password>@mycluster0.ggrzo.mongodb.net/<DBname>?retryWrites=true&w=majority
// <password>のところは自分のアカウントのpasswordを入力してください。

2.module 설치

yarn add mongodb dotenv

3.몬godB에 연결하기 위해서js에 쓰다

// server/index.js
const { ApolloServer } = require("apollo-server-express")
const express = require("express")
// typeDefs,resolversをインポート
const typeDefs = require("./graphQL/scema/test")
const resolvers = require("./graphQL/resolvers/test")
const { MongoClient } = require("mongodb")
require("dotenv").config()

const start = async () => {
  // expressアプリケーションの作成
  const app = express()
  // .envファイルからURLをとってくる
  const MONGO_DB = process.env.URL
  const client = await MongoClient.connect(
    MONGO_DB,
    { useNewUrlParser: true, useUnifiedTopology: true}
  )
  const db = client.db()
  const context = {db}
  // contextを追加
  const server = new ApolloServer({ typeDefs, resolvers, context })
  // expressにミドルウェアを追加する
  server.applyMiddleware({ app })

  // ルートを設定
  app.get("/", (req, res) => res.end("welcome"))

  app.listen({ port: 4000 }, () =>
    console.log(`graphQL ServerRunnig http://localhost:4000${server.graphqlPath}`)
  )
}
start()

server/index.typeDefs와resolvers를 js로 가져왔기 때문에 그것을 만듭니다.

// server/graphQL/resolvers/test.js
// resolverを作成
const resolver = {
  Query: {
// mongoDBのコレクションの中にmessagesというドキュメントの数をだすクエリ
    messagesCount: (parent, args, { db }) => 
db.collection("messages").estimatedDocumentCount(),
// messageドキュメントの全てを表示させるクエリ 
    allMessages: (parent, args, { db }) => db.collection("messages").find().toArray(),
  },
// メッセージを追加するためのミューテーション
  Mutation: {
    async postMessage(parent, args, { db }) {
      const newMessage = {
        ...args,
        created: new Date()
      }
      const { insertedId } = await db.collection(`messages`).insertOne(newMessage)
      newMessage.id = insertedId
      return newMessage
    },
  },
//　idとcreatedは自動的に作成されて欲しいのでここで設定
  Message:{
    id:parent=>parent.id||parent._id,
    created:parent=>parent.created
  }
}

module.exports = resolver

// server/graphQL/schema/test.js
const schema = `
type Message{
  id:ID!
  message:String!
  created:String!
}

type Query {
  messagesCount : Int!
  allMessages:[Message!]!
}

type Mutation {
  postMessage(message: String!): Message!
}
`
module.exports = schema

이상 리소스,schema 제작 완료

확인

yarn 명령을 통해 서버를 시작한 후
localhost:4000/graphql
mutation을 열고 메시지 데이터를 입력하면query를 누르면 데이터가 완성됩니다!