Day 05 - GraphQL Types and Schema wiht node.js (第 01 屆 Coder Blogathon Taiwan)

我都不會 GraphQL

CoderBridge 網址 Day05

---

把 Day04 建置好的繼續玩下去:)

1. Query types and fields

• 把 schema.js and index.js 加工

• 可以更加瞭解 GraphQL 整個的港絕~

• 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 = { friend: () => {
       return {
           "id": 123456, 
           "firstName": "Marry",
           "lastName": "Henri",
           "Gender": "Male",
           "language": "English",
           "emails": [
               { email: "graphql@graphql.com"}, 
               { email: "graphql2@graphql.com"}]
       }
   }};
     
   app.use("/graphql", graphqlHTTP({
       schema: schema,
       rootValue: root,
       graphiql: true,
   }))
     
   app.listen(8080, ()=> console.log("Running server on port localhost:8080/graphql"));
  

• schema.js
  • 下面 emails: ! 代表必寫

   import { buildSchema } from 'graphql';
     
   const schema = buildSchema(`
         type Friend{
             id: ID
             firstName: String
             lastName: String
             gender: String
             language: String
             emails: [Email]!
         }
     
         type Email {
             email: String
         }
     
         type Query{
             friend: Friend
         }
   `)
     
   export default schema;
  

2. Query and Mutation types

• 把 schema.js and index.js 再次加工

• 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");
   });
     
   class Friend {
       constructor(id, {firstName, lastName, gender, language, email}){
           this.id = id;
           this.firstName = firstName;
           this.lastName = lastName;
           this.gender= gender;
           this.language = language;
           this.email = email;
     
       }
   }
     
   const friendDatabase = {}
     
   const root = {
       friend: () => {
           return {
               "id": 123456,
               "firstName": "Marry",
               "lastName": "Henri",
               "Gender": "Male",
               "language": "English",
               "emails": [
                   { email: "graphql@graphql.com" },
                   { email: "graphql2@graphql.com" }
               ],
           }
       },
     
       createFriend: ({input}) => {
           let id = require('crypto').randomBytes(10).toString('hex'); // random create id
           friendDatabase[id] = input;
           return new Friend(id, input);
       },
   };
     
   app.use("/graphql", graphqlHTTP({
       schema: schema,
       rootValue: root,
       graphiql: true,
   }))
     
   app.listen(8080, () => console.log("Running server on port localhost:8080/graphql"));
   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");
   });
     
   class Friend {
       constructor(id, {firstName, lastName, gender, language, email}){
           this.id = id;
           this.firstName = firstName;
           this.lastName = lastName;
           this.gender= gender;
           this.language = language;
           this.email = email;
     
       }
   }
     
   const friendDatabase = {}
     
   const root = {
       friend: () => {
           return {
               "id": 123456,
               "firstName": "Marry",
               "lastName": "Henri",
               "Gender": "Male",
               "language": "English",
               "emails": [
                   { email: "graphql@graphql.com" },
                   { email: "graphql2@graphql.com" }
               ],
           }
       },
     
       createFriend: ({input}) => {
           let id = require('crypto').randomBytes(10).toString('hex'); // random create id
           friendDatabase[id] = input;
           return new Friend(id, input);
       },
   };
     
   app.use("/graphql", graphqlHTTP({
       schema: schema,
       rootValue: root,
       graphiql: true,
   }))
     
   app.listen(8080, () => console.log("Running server on port localhost:8080/graphql"));
  

• schema.js

   import { buildSchema } from 'graphql';
     
   const schema = buildSchema(`
         type Friend{
             id: ID
             firstName: String
             lastName: String
             gender: String
             language: String
             email: String
         }
     
         type Query{
             friend: Friend
         }
     
         input FriendInput{
           id: ID
           firstName: String!
           lastName: String
           gender: String
           language: String
           email: String
         }
     
         type Mutation{
             createFriend(input: FriendInput): Friend
         }
   `)
     
   export default schema;
  

• 去看一下自己寫的然後塞入資料看看:

• 重構一下

  • 新增一個 resolvers.js

     class Friend {
         constructor(id, {firstName, lastName, gender, language, email}){
             this.id = id;
             this.firstName = firstName;
             this.lastName = lastName;
             this.gender= gender;
             this.language = language;
             this.email = email;
          
         }
     }
          
     const friendDatabase = {}
          
     const resolvers = {
          
         getFriend: ({ id }) => {
             return new Friend(id, friendDatabase[id]);
         },
          
         createFriend: ({input}) => {
             let id = require('crypto').randomBytes(10).toString('hex'); // random create id
             friendDatabase[id] = input;
             return new Friend(id, input);
         },
     };
          
     export default resolvers;
    

  • schema.js

     import { buildSchema } from 'graphql';
          
     const schema = buildSchema(`
           type Friend{
               id: ID
               firstName: String
               lastName: String
               gender: String
               language: String
               email: String
           }
          
           type Query{
               getFriend(id: ID): Friend
           }
          
           input FriendInput{
             id: ID
             firstName: String!
             lastName: String
             gender: String
             language: String
             email: String
           }
          
           type Mutation{
               createFriend(input: FriendInput): Friend
           }
     `)
          
     export default schema; 
    

  • index.js

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

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

Linkedin Learning

七天～　逼一下自己