Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

Takayuki Matsubara

September 27, 2018
Tweet

More Decks by Takayuki Matsubara

Other Decks in Programming

Transcript

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

    View full-size slide

  2. 5BLBZVLJ.BUTVCBSB
    ϚϧνσόΠενʔϜ
    ௨শϚϧσό

    νʔϜϦʔμʔ
    UXJUUFS!NBHF
    3VCZ &MJYJSBOE044
    044΋͘΋͘ձओ࠵

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  8. γεςϜߏ੒ ݱࡏ


    "1*
    αʔό
    (SBQI2-
    αʔό
    "1*
    αʔό܈
    "1*
    αʔό܈
    "1*
    αʔό܈
    "1*
    αʔό܈

    View full-size slide

  9. γεςϜߏ੒ কདྷ


    "1*
    αʔό
    (SBQI2-
    αʔό
    "1*
    αʔό܈
    "1*
    αʔό܈
    "1*
    αʔό܈
    "1*
    αʔό܈

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  15. εΩʔϚϑΝʔετ։ൃ
    w ΠϯλʔϑΣʔε *'
    ΛઌʹܾΊΔ ੺࿮ͷ෦෼

    w ϑϩϯτΤϯυɺόοΫΤϯυڞʹ*'Λ΋ͱʹ։ൃ͢Δ
    (SBQI2-
    αʔό

    View full-size slide

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

    View full-size slide

  17. 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 full-size slide

  18. 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 full-size slide

  19. JOEFYKT ൈਮ

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

    View full-size slide

  20. UZQF@EFGTKT ൈਮ

    module.exports = `

    # ஶऀ
    type Author {
    id: ID!
    # ஶऀ໊
    name: String!
    # ஶऀͷຊ
    books: [Book]!
    }
    # ຊ
    type Book {
    id: ID!
    # ໊લ
    name: String!
    }

    `;

    View full-size slide

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

    View full-size slide

  22. MPDBMIPTUHSBQIJRM

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  26. JOEFYKT ൈਮ

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

    View full-size slide

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

    View full-size slide

  28. MPDBMIPTUHSBQIJRM

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide