3 minute read

Tags: , ,

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

七天~ 逼一下自己