🍣

Apollo+MongoDBを使って最小限の使い方を学んでみた

2021/01/01に公開

GraphQL

今回の目的

graphQLとdbとの接続を学ぶ
mongodb atlasを使ってみる

バックエンド初心者が学ぶ目的でやっております。もっといい書き方があったりしたら、ご教授していただきたいと思います！

ApolloServerとexpressにてserverをセットアップ

1.まず、自分のお好きなディレクトリでファイル、フォルダを作成していきます

yarn init

// yarnでもnpmでもどっちでも大丈夫です、以降はyarn にて進めていきます。
ディレクトリ構成は以下の様にします。

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

2.必要なmoduleをインストールしていきます。

yarn add express apollo-server-express nodemon graphql

今回はApolloServerを立てgraphqlを使うためexpressとapollo-server-express,graphqlをインストールします。
また、ファイル変更に伴ってサーバーを再起動し変化に対応するためnodemonをインストールします。
3.nodemonに監視させる。

nodemonにファイルの変更を監視させるためにpackage.jsonを書き換えていきます。

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

これで、server/index.js実行される様になり、jsとjsonが監視される様になります。
4.ApolloServerを立てます。
expressのミドルウェアを利用してApolloServer立てます。
とりあえず仮のresolvers、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.serverが起動することを確認し立ち上がったPlayGroundにてHello worldが帰ってくるか確認する
まずターミナルから以下のコマンドを実行する

yarn start

指定したport(今回はlocalhost:4000)に移動
そこで"welcome"と表示され、localhost:4000/graphqlに移動するとgraphqlのPlayGroundが起動する

PlayGroundに

query {
  hello
}

と入力して実行すれば、resolversで指定したHello worldが帰ってくる。
ここまでで一応serverの立ち上げの部分になります。

mongoDB atlasを使ってserverとつなげる

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.mongoDBと接続するためにserver/index.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.jsでtypeDefsとresolversをインポートしているのでそれを作成します。

// 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

以上でresolvers、schemaの作成が完成

確認

yarn コマンドにてserverを起動後
localhost:4000/graphql
を開きmutationでmessageデータを入れた後、queryを叩いてデータが取れて来れれば完成！

今回の目的

ApolloServerとexpressにてserverをセットアップ

mongoDB atlasを使ってserverとつなげる

確認

Discussion