Day 07 - GraphQL with docker MongoDB (第 01 屆 Coder Blogathon Taiwan)

ㄟ~~~~~~ 怎麼跳那麼多天 XDDDDD

我都不會 GraphQL

CoderBridge 網址 Day07

---

無敵大遲交ＸＤＤ

接續 Day04、 Day05 、 Day06 繼續玩下去:)

事前安裝

• 跟 MongoDB 相關
  • npm install --save mongoose
• 跟 建構假資料和其他 相關
  • npm install --save casual loadsh sequelize sqlite3

• package.json 長這樣

  {
  "name": "graphql-node",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "nodemon ./index.js --exec babel-node -e js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "casual": "^1.6.2",
    "express": "^4.17.1",
    "express-graphql": "^0.9.0",
    "graphql": "^14.6.0",
    "graphql-tools": "^4.0.7",
    "lodash": "^4.17.15",
    "mongoose": "^5.9.2",
    "nodemon": "^2.0.2",
    "sequelize": "^5.21.5",
    "sqlite3": "^4.1.1"
  },
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-stage-0": "^6.24.1"
  }
  }
  

• 安裝 Robo 3T MongoDB GUI

用 docker 跑一個 MongoDB

• 原本教學影片是直接把　MongoDB　安裝到本機，想說都學 docker 了就直接來吧！
  • docker container run -d --name graphql-db2 -p 127.0.0.1:27017:27017 mongo
  • DockerHub: mongo
  • 不用設定 MONGO_INITDB_ROOT_USERNAME 、 MONGO_INITDB_ROOT_PASSWORD 本教學用的話會爆炸ＸＤＤ　我卡一陣子

開一個資料夾把 resolvers.js 和 schema.js 丟進去，在這資料夾新建一個 dbConnections.js

• 現在結構長這樣

看 resolvers.js 、 schema.js 、 dbConnections.js 、 index.js 的 code !

• resolvers.js

  import mongoose from 'mongoose';
  import { Friends } from './dbConnectors';
  // resolver map
  export const resolvers = {
    Query: {
        getFriend: ({ id }) => {
            return new Friend(id, friendDatabase[id]);
        },
    },
    Mutation: {
        createFriend: (root,  {input}) => {
            const newFriend = new Friends({
                firstName: input.firstName,
                lastName: input.lastName,
                gender: input.gender,
                age: input.age,
                language: input.language,
                email: input.email,
                contacts: input.contacts,
            });
            newFriend.id = newFriend._id;
            return new Promise((resolve, object) => {
                newFriend.save((err)=>{
                    if (err) reject(err)
                    else resolve(newFriend)
                })
            })
        },
    },
  };
  

• schema.js

  import { resolvers } from './resolvers';
  import { makeExecutableSchema } from 'graphql-tools'
  const typeDefs = `
      type Friend{
          id: ID
          firstName: String
          lastName: String
          gender: Gender
          age: Int
          language: String
          email: String
          contacts: [Contact]
      }
  
      type Alien{
          id: ID
          firstName: String
          lastName: String
          planet: String
      }
  
      type Contact{
          firstName: String
          lastName: String
      }
  
      enum Gender{
          MALE
          FEMALE
          OTHER
      }
  
      type Query{
          getFriend(id: ID): Friend
      }
  
      input FriendInput{
        id: ID
        firstName: String!
        lastName: String
        gender: Gender
        age: Int
        language: String
        email: String
        contacts: [ContactInput]
      }
  
      input ContactInput{
        firstName: String
        lastName: String
      }
  
      type Mutation{
          createFriend(input: FriendInput): Friend
      }
  `;
  const schema = makeExecutableSchema( {typeDefs, resolvers} )
  export {schema};
  

• dbConnections.js

  import mongoose from 'mongoose';
  import Sequelize from 'sequelize';
  import _ from 'lodash';
  import casual from 'casual';
  // Mongo Connection 
  mongoose.Promise = global.Promise;
  mongoose.connect('mongodb://localhost:27017/friends', {});
  const friendSchema = new mongoose.Schema({
    firstName:{
        type: String
    },
    lastName:{
        type: String
    },
    gender:{
        type: String
    },
    age:{
        type: Number
    },
    language:{
        type: String
    },
    email:{
        type: String
    },
    contacts:{
        type: Array
    },
  });
  const Friends = mongoose.model('friends', friendSchema);
  // SQL 
  const sequelize = new Sequelize('database', null, null, {
    dialect: 'sqlite',
    storage: './aliens.sqlite', // just like redis
  });
  const Aliens = sequelize.define('aliens', {
    firstName: { type: Sequelize.STRING },
    lastName: { type: Sequelize.STRING },
    planet: { type: Sequelize.STRING },
  });
  Aliens.sync({ force: true }).then(() => {
    _.times(10, (i)=> {
        Aliens.create({
            firstName: casual.first_name,
            lastName: casual.last_name,
            plane: casual.word,
        });
    });
  }); // create fake data
  export { Friends, Aliens };
  

• index.js

  import express from 'express';
  import graphqlHTTP from 'express-graphql';
  import { schema } from './data/schema';
  const app = express();
  app.get('/', (req, res) => {
    res.send("GraphQL is amazing");
  });
  app.use("/graphql", graphqlHTTP({
    schema: schema,
    graphiql: true,
  }))
  app.listen(8080, () => console.log("Running server on port localhost:8080/graphql"));
  

Run 起來，然後塞資料，再去 Robo 3T 看資料

• 看有沒有　error，記得 docker 要先 run 起來

• 塞資料～
• 進 Robo 3T 看塞進去的資料
  • 塞成功啦！！！

哈哈哈 Day07 最後一天　我遲交好多天！

• 很有趣的平台，謝謝：）
• 逼自己學一點點　YA!
• 還有很多沒學、講完 … 留到下次! XDDD
• 當個時時督促自己的 procrastinator
• 好啦不完美的完美結束　ㄅㄅ～～

其實我也是跟著影片學　ＸＤ　

Linkedin Learning

七天～　逼一下自己