GraphQL 開発で必要になったこと / What we needed for GraphQL development

We decided to use GraphQL in the next project.
I summarized to slides about what we needed for GraphQL development.
Slides for M3 tech meetup! #4

Transcript

1. (SBQI2-։ൃͰඞཁ
   ʹͳͬͨ͜ͱ
   .UFDINFFUVQ!NBHF
   

   View Slide

2. View Slide

3. View Slide

4. 5BLBZVLJ.BUTVCBSB
   ϚϧνσόΠενʔϜ
   ௨শϚϧσό
   
   νʔϜϦʔμʔ
   UXJUUFS!NBHF
   3VCZ &MJYJSBOE044
   044΋͘΋͘ձओ࠵
   

   View Slide

5. 1PXFS"TTFSU&Y⭐
   HJUIVCDPNNBHFEFWQPXFS@BTTFSU@FY
   

   View Slide

6. View Slide

7. (SBQI2-։ൃͰඞཁ
   ʹͳͬͨ͜ͱ
   

   View Slide

8. ࠓ೔࿩͞ͳ͍͜ͱ
   w (SBQI2-ʹ͍ͭͯͬ͘͟Γ஌͍ͬͯΔલఏ
   w ΋͠෼͔Βͳ͍ͱ͍͏ਓ͕͍ͨΒԼهNPHBNJOH͞Μ
   ͷࢿྉ΍ɺ৿͞Μͷॻ͍ͨهࣄΛݟΔͱͲΜͳ΋ͷ͔
   ෼͔Γ΍͍͢Ͱ͢
   ࢀߟϦϯΫ
   J04º(SBQI2-ͷخ͠Έͱπϥϛ1SPTBOEDPOTPGJ04BOE(SBQI2-
   IUUQTTQFBLFSEFDLDPNNPHBNJOHQSPTBOEDPOTPGJPTBOE
   HSBQIRM
   (SBQI2-ೖ໳3FBDUKT&YQSFTTKT"QPMMPͷ؆୯νϡʔτϦΞϧ
   IUUQTXXXNUFDICMPHFOUSZHSBQIRMBQPMMPSFBDUFYQSFTTOPEFKT
   

   View Slide

9. ϚϧσόνʔϜͱ͸
   w J04 "OESPJEΞϓϦ։ൃ෦ୂ
   w "1*αʔό΋ݟ͍ͯΔ
   w 1VTI഑৴ج൫΋ݟ͍ͯΔ
   

   View Slide

10. ϚϧσόνʔϜͱ͸
    w J04 "OESPJEΞϓϦ։ൃ෦ୂ
    w "1*αʔό΋ݟ͍ͯΔ(SBQI2-ͰϦϓϨΠε͍ͨ͠
    w 1VTI഑৴ج൫΋ݟ͍ͯΔ
    ࢀߟ
    ϑϩϯτΤϯυ޲͚ͷ"1*αʔόϦχϡʔΞϧʹ(SBQI2-Λݕ౼͍ͯ͠Δ࿩
    IUUQTXXXNUFDICMPHFOUSZHSBQIRMPOTQSJOHCPPUXJUILPUMJO
    αʔόαΠυ
    ,PUMJO
    

    View Slide

11. ,POUSJCVUPS
    

    View Slide

12. γεςϜߏ੒ ݱࡏ
    
    
    "1*
    αʔό
    (SBQI2-
    αʔό
    "1*
    αʔό܈
    "1*
    αʔό܈
    "1*
    αʔό܈
    "1*
    αʔό܈
    

    View Slide

13. γεςϜߏ੒ কདྷ
    
    
    "1*
    αʔό
    (SBQI2-
    αʔό
    "1*
    αʔό܈
    "1*
    αʔό܈
    "1*
    αʔό܈
    "1*
    αʔό܈
    

    View Slide

14. ։ൃ࢝͠Ίͯগͨͬͨ͠ͱ͋Δ೔
    

    View Slide

15. r4MBDLΑΓ
    l"OESPJE൛͸ຊ೔னʹୟ͖୆׬੒༧ఆͰ͢z
    

    View Slide

16. (SBQI2-αʔόͰ͖ͯͳ͍
    ͜ͷઌͷ։ൃͲ͏͢Δͷ
    

    View Slide

17. ͜ͷ··͍͘ͱɻɻɻ
    w ޾͍"1*ͳͯ͘΋ϑϩϯτ͸͋Δఔ౓։ൃͰ͖Δͱͷ͜
    ͱ
    w ͔͠͠ཪଆͷ࣮૷΋ͭͭ͠ɺ(SBQI2-"1*Λఏڙͯ͠ߦ
    ͘ͱͳΔͱ͍ͣΕ௥͍͔ͭΕͯ࣌ؒ଍Γͳ͘ͳΓͦ͏ʜ
    

    View Slide

18. (SBQI2-
    εΩʔϚϑΝʔετ։ൃ
    ࢀߟϦϯΫ
    (SBQI2-BOE4DIFNB'JSTU%FWFMPQNFOU
    IUUQTTQFBLFSEFDLDPNLZNNUHSBQIRMBOETDIFNBpSTU
    EFWFMPQNFOU
    

    View Slide

19. εΩʔϚϑΝʔετ։ൃ
    w ΠϯλʔϑΣʔε *'
    ΛઌʹܾΊΔ ੺࿮ͷ෦෼
    
    w ϑϩϯτΤϯυɺόοΫΤϯυڞʹ*'Λ΋ͱʹ։ൃ͢Δ
    (SBQI2-
    αʔό
    

    View Slide

20. ϞοΫαʔό
    w ϑϩϯτΤϯυ͕։ൃ͢ΔͨΊʹ΋ϞοΫαʔό͕ඞཁ
    w "QPMMPͷ(SBQI2-UPPMTΛ࢖͏
    ࢀߟϦϯΫ
    (SBQI2-UPPMTHFOFSBUFBOENPDL(SBQI2-KTTDIFNBT
    IUUQTHJUIVCDPNBQPMMPHSBQIRMHSBQIRMUPPMT
    

    View Slide

21. QBDLBHFKTPO
    ࢀߟ
    ҎԼʹ͜ͷޙͷࢿྉͰ࢖͍ͬͯΔαϯϓϧίʔυΛࡌͤͯ͋Γ·͢
    IUUQTHJUIVCDPNNEFWHSBQIRMTQSJOHCPPULPUMJOTBNQMFQVMM
    {
    "name": "mock",
    "version": "1.0.0",
    "description": "graphql mock server",
    "dependencies": {
    "apollo-server-express": "^1.4.0",
    "body-parser": "^1.18.3",
    "express": "^4.16.3",
    "graphql": "^0.13.2",
    "graphql-tools": "^4.0.0"
    },
    "scripts": {
    "start": "node ./index.js"
    },
    "devDependencies": {},
    "author": "Takayuki Matsubara",
    "license": "MIT"
    }
    

    View Slide

22. JOEFYKT શମ
    
    const express = require('express');
    const bodyParser = require('body-parser');
    const { graphqlExpress, graphiqlExpress } = require('apollo-server-
    express');
    const { addMockFunctionsToSchema, makeExecutableSchema } =
    require('graphql-tools');
    const typeDefs = require('./type_defs');
    const schema = makeExecutableSchema({ typeDefs });
    const mocks = require('./mocks')
    addMockFunctionsToSchema({ schema, mocks });
    const app = express();
    app.use('/graphql', bodyParser.json(), graphqlExpress({ schema }));
    app.use("/graphiql", graphiqlExpress({ endpointURL: "/graphql" }));
    app.listen(3000, () => {
    console.log('/graphiql is running');
    });
    

    View Slide

23. JOEFYKT ൈਮ
    
    const typeDefs = require('./type_defs');
    const schema = makeExecutableSchema({ typeDefs });
    const mocks = require('./mocks')
    addMockFunctionsToSchema({ schema, mocks });
    εΩʔϚΛఆٛ͢Δ
    

    View Slide

24. UZQF@EFGTKT ൈਮ
    
    module.exports = `
    …
    # ஶऀ
    type Author {
    id: ID!
    # ஶऀ໊
    name: String!
    # ஶऀͷຊ
    books: [Book]!
    }
    # ຊ
    type Book {
    id: ID!
    # ໊લ
    name: String!
    }
    …
    `;
    

    View Slide

25. ࣮͸͜͜·ͰͰಈ͘
    OQNSVOTUBSU
    

    View Slide

26. MPDBMIPTUHSBQIJRM
    

    View Slide

27. ABEE.PDL'VODUJPOT5P4DIFNBAͰ
    BQPMMP͕͍͍ײ͡ʹฦͯ͘͠ΕΔ
    

    View Slide

28. εΩʔϚ͕͋Ε͹
    w ͦΕͬΆ͍ϞοΫ͸࡞ΕΔ
    w ͋ͱ͸εΩʔϚʹ͍ͭͯ࿩͠߹ܾͬͯΊΔͳΓ͢Ε͹Α͍
    w ܾΊͨΒͦΕΛͦͷ··ϞοΫαʔόଆʹઃఆ͢Δ
    

    View Slide

29. ΋ͬͱͩ͜ΘΓ͍ͨ
    w ͦΜͳํ͸NPDLͰ৭ʑఆٛͰ͖Δ
    

    View Slide

30. JOEFYKT ൈਮ
    
    const typeDefs = require('./type_defs');
    const schema = makeExecutableSchema({ typeDefs });
    const mocks = require('./mocks')
    addMockFunctionsToSchema({ schema, mocks });
    ϞοΫΛఆٛ͢Δ
    

    View Slide

31. NPDLTKT
    module.exports = {
    Author: () => ({
    name: 'Takayuki Matsubara',
    }),
    Book: () => ({
    name: 'Elixir Book',
    }),
    };
    ࢀߟ
    ެࣜʹ΋ͬͱΧελϜͰ͖Δྫ͕͋Δ
    IUUQTXXXBQPMMPHSBQIRMDPNEPDTHSBQIRMUPPMTNPDLJOHIUNM
    

    View Slide

32. MPDBMIPTUHSBQIJRM
    

    View Slide

33. ϞοΫαʔόͰ͖ͨ
    w ͜ΕΛ΋ͱʹࠓޙεΩʔϚఆ͔ٛΒ࿩͠߹ͬͯਐΊ͍ͯ͘
    w ࠓޙ։ൃͰ௥͍͔ͭΕͯ΋େৎ෉
    

    View Slide

34. (SBQI2-։ൃͰඞཁʹͳͬͨ͜ͱ
    w εΩʔϚϑΝʔετͳ։ൃ
    w ฒߦͯ͠։ൃͰ͖ͦ͏
    w ͜Ε͔Β͞Βʹ։ൃ͍ͯ͘͠
    

    View Slide

35. (SBQI2-։ൃͰඞཁ
    ʹͳͬͨ͜ͱ
    .UFDINFFUVQ!NBHF
    

    View Slide