Tweet
Tweet

Slide 1

Slide 1 text

ॳ৺ऀ͕΄΅஌ࣝθϩͰ৮ͬ ͯΈͨGraphQLͷײ૝ API Meetup Tech Deep Dive #2: GraphQL

Slide 2

Slide 2 text

About me • Junichi Okamura (@benzookapi) • API Lover/Midnight Developer/MANGA Creator/ TDD(Talk Driven Development)

Slide 3

Slide 3 text

ࠓ೔͓࿩͍ͨ͜͠͠ͱ • GraphQLʹؔ৺Λ࣋ͬͨཧ༝ͱ৮ͬͯΈͨײ૝ • ಺༰͸ઙ͍Ͱ͢ • ͔ͤͬ͘ͳͷͰಠࣗͷ໘നݟղʹ·ͱΊͯΈ· ͨ͠

Slide 4

Slide 4 text

GraphQLʹؔ৺Λ࣋ͬͨཧ༝ • REST APIʹ๞͖͖ͯͨ • ͦΖͦΖԿ͔৽͍͠࢓༷ग़͖ͯͯ΋͍͍Μ͡Ό ͳ͍ʁ • ࢀরܥPOST໰୊

Slide 5

Slide 5 text

ૣ଎৮ͬͯΈΔʁ • NO, ωοτͰ֓ཁ͚ͩ֬ೝͯ͠͠͹Β͘์ͬͯ ͓͍ͨ • ॳݟͱͯ͠͸ɺύϑΥʔϚϯε΍ফඅϦιʔεʹ ໰୊ͳ͚Ε͹ྑͦ͞͏

Slide 6

Slide 6 text

࣮ࡍ৮Δ͖͔͚ͬ • Կؾͳ͠ʹʮ࣍ճGraphQLऔΓ্͛ͯͩ͘͞ ͍ʂʯͱAPI MeetupͷํʹݴͬͨΒ͍ͭͷ·ʹ ͔ొஃ͢Δ͜ͱʹͳͬͯͨ • Α͠ٱʑʹTDD (Talk Driven Developmentʣͩʂ

Slide 7

Slide 7 text

৮ͬͯΈͨʢσϞʣ • https://github.com/benzookapi/my-graphql- sample • https://github.com/benzookapi/my-react-sample • ͪ͜Βͷलҳ͗͢Δϒϩά͔Β΄΅ίϐʔͯ͠ಈ ͖·ͨ͠ɻhttps://www.m3tech.blog/entry/ graphql-apollo-react-express-nodejs

Slide 8

Slide 8 text

σϞͷߏ੒ ͭͳ͙ଆʢΫϥΠΞϯτʣ React GraphQL modules http://localhost:3000 ఏڙ͢Δଆʢαʔόʔʣ Node+Express GraphQL modules http://localhost:4000/graphiql

Slide 9

Slide 9 text

΍Γ͔ͨͬͨ͜ͱ • REST ͱGraphQL ͷ࣮૷ൺֱ • ͭͳ͙ଆʢΫϥΠΞϯτʣ͔ΒΈͯͲ͏͔ʁ • ఏڙ͢Δଆʢαʔόʔʣ͔ΒΈͯͲ͏͔ʁ • ࢒೦ͳ͕ΒRESTଆͷ࣮૷͸͕࣌ؒͳͯؒ͘ʹ߹ Θͣɾɾɾ

Slide 10

Slide 10 text

ͭͳ͙ଆʢΫϥΠΞϯτʣ GraphQL vs REST ࣮૷ίετͷ௿͞ G ≒ R (ϥΠϒϥϦ࢖͑͹มΘΒͳ͍ʁʣ ύϑΥʔϚϯε G > R (G͸ίʔϧ਺ΛݮΒͤΔ෼͚ͩૣ͍ʁʣ ίʔυͷগͳ͞ɾՄ ಡੑ G > R (G͸ίʔϧ਺ΛݮΒͤΔ෼͚ͩઅ໿ɺ؆୯ʁʣ ϝϯςφϯεੑ G ≒ R (࢓༷มߋͷίετ͸ಉ͡ʁʣ

Slide 11

Slide 11 text

ఏڙ͢Δଆʢαʔόʔʣ GraphQL vs REST ࣮૷ίετͷ௿͞ GraphQL < REST (G͸࿈݁΍ෛՙઃܭ͕େมʁʣ ύϑΥʔϚϯε GraphQL ≒ < REST (ઃܭ࣍ୈ͕ͩRͷํָ͕ͦ͏ʣ ίʔυͷগͳ͞ɾՄ ಡੑ GraphQL ≒ < REST (ઃܭ࣍ୈ͕ͩGͷํ͕൥ࡶʹͳΓ͕ͪʁʣ ϝϯςφϯεੑ GraphQL > REST (G͸όʔδϣϯϨεͰεΩʔϚఏڙʣ

Slide 12

Slide 12 text

ֶͼํ • άάΔͱ৭ʑ͋Δ͚ͲຊՈαΠτΛॳΊ͔Βಡ Ήͷ͕Ұ൪Φεεϝ https://graphql.github.io/ • ҎԼ͸࣮༻త͔ͭ٬؍తͳઆ໌ͰΦεεϝ https://note.mu/konpyu/n/nc4fd122644a1

Slide 13

Slide 13 text

ͪͳΈʹੈͷAPIͰͲΕ͘Β͍ࢼ ͤΔͷ͔ɾɾʁ ͜Μ͚ͩϢʔβʔͱͯ͠ද໌͞Ε͍ͯΔ͕΄ ͱΜͲ͕಺෦޲͚ར༻ʢͩͱࢥ͏ʣ facebook API͢Βݟ౰ͨΒͳ͍ʂ ʢfacebook͸ݩʑύϑΥʔϚϯεվળͷͨΊ ʹGraphQLΛ։ൃɺOSSԽʣ

Slide 14

Slide 14 text

ײ૝ᶃ ౰ॳ͸ϦΫΤετ΋Ϩεϙϯε΋JSONͰશ෦ POSTͰγϯϓϧϥοΩʔͱࢥ͍͕ͬͯͨɺҙ֎ͱ ಠࣗ࢓༷͕ଟֶ͘शίετߴͦ͏

Slide 15

Slide 15 text

ײ૝ᶄ σʔλ࡞੒ ʢRESTͰ͍͏POSTʣʹ͸͋·ΓԸܙ Λײ͡ͳ͍ɻΫΤϦͱΠϯλʔϑΣʔε͕ࣅ͍ͯΔ ͷͰٯʹࠞಉͦ͠͏

Slide 16

Slide 16 text

ײ૝ᶅ Authͷඪ४࢓༷͕ͳ͍ʂʢGraphQLͱͯ͠͸؅׋ ֎ʁʣϏδωεϩδοΫͰ΍Εͱ͔ɺJWTΛ࢖͏ ͱ͔ఏҊతʹ͸ॻ͍ͯ͋Δ ਺গͳ͍֎෦APIͱͯ͠ެ։͠ ͍ͯΔϓϥοτϑΥʔϜ͸ɺׂΓ੾ͬ ͯREST ͷOAuthΛྲྀ༻͍ͯ͠Δέʔε ͕ଟ͍ ʢࣗ෼΋ࢍ੒ʣ

Slide 17

Slide 17 text

ײ૝ᶆ APIΛ੡඼ͱͯ͠ఏڙ͢ΔଆʢϓϥοτϑΥʔϜʣ ͸ɺΑͬΆͲ͏·͘ઃܭ͠ͳ͍ͱແବʹϦιʔε ৯ΘΕͨΓɺެ։ൣғ΍՝ۚମܥͷॲཧ͕େมʹ ͳΓͦ͏ʢRESTͰendpoint୯ҐͰग़͠Θ͚Ͱ͖ͯ ͨ͜ͱ͕શ෦ॲཧϕʔεʹͳΔʣ

Slide 18

Slide 18 text

ײ૝ᶇ ݁ߏReactΑΓͩͳɾɾʢग़ࣗతʹ͠ΐ͏͕ͳ͍ؾ ΋͢Δ͚ͲɺReact͸ϋʔυϧߴ͍ਓଟ͍Α͏ͳʣ

Slide 19

Slide 19 text

ײ૝ᶈ • REST GETͩͱͲ͏ͯ͠΋දݱͮ͠Β͍ෳࡶͳΫ ΤϦʔΛAPIͰఏڙ͢Δʹ͸ظ଴௨Γ໾ཱͪͦ͏ • όʔδϣϯͳͲҙࣝͤͣ͞ήʔτ΢ΣΠ΍ݕࡧ Τϯδϯతʹ࢖͑ΔAPIʹ͸ྑ͍͔΋ • ͋ΕɺͰ΋ͦΜͳΫΤϦʹಛԽ͓ͨ͠ೃછΈͷ ΋ͷ͋ͬͨΑͳɾɾɾ

Slide 20

Slide 20 text

SɾQɾLʂ

Slide 21

Slide 21 text

݁࿦ ͻΐͬͱͯࣗ͠෼͕ཉ͍͠ͷͬͯ͜͏͍͏΍ͭͩͬͨɾɾʁ Request: SQL select id, name from employee where id = 1; Response: JSON {id: 1, name: “me”} https://myapi.com/ (Single endpoint) Method: POST Headers: REST compatible (Auth) Status: REST compatible (Error handling)

Slide 22

Slide 22 text

͓͋ͱ͕ΑΖ͍͠Α͏Ͱ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ