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;
    
  • 去看一下自己寫的然後塞入資料看看:
    img

  • 重構一下

    • 新增一個 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"));
      

其實我也是跟著影片學 XD 
Linkedin Learning
七天~ 逼一下自己








Related Posts

Day04 - SignalR 簡介

Day04 - SignalR 簡介

Web的視覺呈現之CSS七天練功

Web的視覺呈現之CSS七天練功

MySQL入門

MySQL入門




Sponsored



Comments