Day05: GraphQL - Types and Schema wiht node.js

把 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
七天～　逼一下自己