Day04: GraphQL Server setup with node.js

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