Day 04 - GraphQL Server setup with node.js (第 01 屆 Coder Blogathon Taiwan)

我都不會 GraphQL

CoderBridge 網址 Day04

• 剛剛看 好像有爆版XDD 哭哭~

---

Initial GraphQL and Server setup

• 事前作業:
  • nodejs: 安裝 LTS

1. npm init

• 找一個舒服的資料夾 npm init

2. npm install

• npm install –save express nodemon graphql express-graphql
• npm install –save-dev babel-cli babel-preset-env babel-preset-stage-0
• 這時候資料夾應該長這樣
  • 

3. 在 package.json裡 scripts: 下加入客製的 start 指令

• start":"nodemon ./index.js --exec babel-node -e js
  • 

4. 在資料夾內新增 .babelrc 檔案，加入 Object 參數設定 讓 server 可 跑 ES6 code

• 這時候資料夾應該長這樣
  • 
  • .babelrc 檔案 Object 參數設定
  • 

5. 在資料夾內新增 index.js，把 express run 起來~~

• 這時候資料夾應該長這樣
  • 

• index.js

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

• 跑起來
  • npm start
    • 

6. 在資料夾內新增 schema.js

• 這時候資料夾應該長這樣
  • 

• schema.js

   import { buildSchema } from 'graphql';
   const schema = buildSchems(`
         type Query{
             hello: string
         }
   `)
   export default schema;
  

7. 新增 index.js 內容

import express from 'express';
import graphqlHTTP from 'express-graphql';
import schema from './schema';

const app = express();

app.get('/', (req, res) => {
    res.send("GraphQL is amazing");
});

const root = { hello: () => "Hi, I'm Yuting"};

app.use("/graphql", graphqlHTTP({
    schema: schema,
    rootValue: root,
    graphiql: true,
}))

app.listen(8080, ()=> console.log("Running server on port localhost:8080/graphql"));

8. 跑起來~ 去看你的 http://localhost:8080/graphql

• npm start
• http://localhost:8080/graphql 看看有沒有把 graphiql 跑起來~

Day04 作業

• yo~~ 東西都架出來了，可以自由發揮拉~
  • 把剛剛 hello schema 用 graphiql 叫出來~~~ _簡單啦!

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

Linkedin Learning

七天～　逼一下自己