初心者がほぼ知識ゼロで触ってみたGraphQLの感想

Transcript

1. ॳ৺ऀ͕΄΅஌ࣝθϩͰ৮ͬ ͯΈͨGraphQLͷײ૝ API Meetup Tech Deep Dive #2: GraphQL
2. About me • Junichi Okamura (@benzookapi) • API Lover/Midnight Developer/MANGA Creator/ TDD(Talk Driven Development)
3. ࠓ೔͓࿩͍ͨ͜͠͠ͱ • GraphQLʹؔ৺Λ࣋ͬͨཧ༝ͱ৮ͬͯΈͨײ૝ • ಺༰͸ઙ͍Ͱ͢ • ͔ͤͬ͘ͳͷͰಠࣗͷ໘നݟղʹ·ͱΊͯΈ· ͨ͠
4. GraphQLʹؔ৺Λ࣋ͬͨཧ༝ • REST APIʹ๞͖͖ͯͨ • ͦΖͦΖԿ͔৽͍͠࢓༷ग़͖ͯͯ΋͍͍Μ͡Ό ͳ͍ʁ • ࢀরܥPOST໰୊
5. ૣ଎৮ͬͯΈΔʁ • NO, ωοτͰ֓ཁ͚ͩ֬ೝͯ͠͠͹Β͘์ͬͯ ͓͍ͨ • ॳݟͱͯ͠͸ɺύϑΥʔϚϯε΍ফඅϦιʔεʹ ໰୊ͳ͚Ε͹ྑͦ͞͏
6. ࣮ࡍ৮Δ͖͔͚ͬ • Կؾͳ͠ʹʮ࣍ճGraphQLऔΓ্͛ͯͩ͘͞ ͍ʂʯͱAPI MeetupͷํʹݴͬͨΒ͍ͭͷ·ʹ ͔ొஃ͢Δ͜ͱʹͳͬͯͨ • Α͠ٱʑʹTDD (Talk Driven Developmentʣͩʂ
7. ৮ͬͯΈͨʢσϞʣ • https://github.com/benzookapi/my-graphql- sample • https://github.com/benzookapi/my-react-sample • ͪ͜Βͷलҳ͗͢Δϒϩά͔Β΄΅ίϐʔͯ͠ಈ ͖·ͨ͠ɻhttps://www.m3tech.blog/entry/ graphql-apollo-react-express-nodejs
8. σϞͷߏ੒ ͭͳ͙ଆʢΫϥΠΞϯτʣ React GraphQL modules http://localhost:3000 ఏڙ͢Δଆʢαʔόʔʣ Node+Express GraphQL modules http://localhost:4000/graphiql
9. ΍Γ͔ͨͬͨ͜ͱ • REST ͱGraphQL ͷ࣮૷ൺֱ • ͭͳ͙ଆʢΫϥΠΞϯτʣ͔ΒΈͯͲ͏͔ʁ • ఏڙ͢Δଆʢαʔόʔʣ͔ΒΈͯͲ͏͔ʁ • ࢒೦ͳ͕ΒRESTଆͷ࣮૷͸͕࣌ؒͳͯؒ͘ʹ߹ Θͣɾɾɾ
10. ͭͳ͙ଆʢΫϥΠΞϯτʣ GraphQL vs REST ࣮૷ίετͷ௿͞ G ≒ R (ϥΠϒϥϦ࢖͑͹มΘΒͳ͍ʁʣ ύϑΥʔϚϯε G > R (G͸ίʔϧ਺ΛݮΒͤΔ෼͚ͩૣ͍ʁʣ ίʔυͷগͳ͞ɾՄ ಡੑ G > R (G͸ίʔϧ਺ΛݮΒͤΔ෼͚ͩઅ໿ɺ؆୯ʁʣ ϝϯςφϯεੑ G ≒ R (࢓༷มߋͷίετ͸ಉ͡ʁʣ
11. ఏڙ͢Δଆʢαʔόʔʣ GraphQL vs REST ࣮૷ίετͷ௿͞ GraphQL < REST (G͸࿈݁΍ෛՙઃܭ͕େมʁʣ ύϑΥʔϚϯε GraphQL ≒ < REST (ઃܭ࣍ୈ͕ͩRͷํָ͕ͦ͏ʣ ίʔυͷগͳ͞ɾՄ ಡੑ GraphQL ≒ < REST (ઃܭ࣍ୈ͕ͩGͷํ͕൥ࡶʹͳΓ͕ͪʁʣ ϝϯςφϯεੑ GraphQL > REST (G͸όʔδϣϯϨεͰεΩʔϚఏڙʣ
12. ֶͼํ • άάΔͱ৭ʑ͋Δ͚ͲຊՈαΠτΛॳΊ͔Βಡ Ήͷ͕Ұ൪Φεεϝ https://graphql.github.io/ • ҎԼ͸࣮༻త͔ͭ٬؍తͳઆ໌ͰΦεεϝ https://note.mu/konpyu/n/nc4fd122644a1
13. ͪͳΈʹੈͷAPIͰͲΕ͘Β͍ࢼ ͤΔͷ͔ɾɾʁ ͜Μ͚ͩϢʔβʔͱͯ͠ද໌͞Ε͍ͯΔ͕΄ ͱΜͲ͕಺෦޲͚ར༻ʢͩͱࢥ͏ʣ facebook API͢Βݟ౰ͨΒͳ͍ʂ ʢfacebook͸ݩʑύϑΥʔϚϯεվળͷͨΊ ʹGraphQLΛ։ൃɺOSSԽʣ
14. ײ૝ᶃ ౰ॳ͸ϦΫΤετ΋Ϩεϙϯε΋JSONͰશ෦ POSTͰγϯϓϧϥοΩʔͱࢥ͍͕ͬͯͨɺҙ֎ͱ ಠࣗ࢓༷͕ଟֶ͘शίετߴͦ͏
15. ײ૝ᶄ σʔλ࡞੒ ʢRESTͰ͍͏POSTʣʹ͸͋·ΓԸܙ Λײ͡ͳ͍ɻΫΤϦͱΠϯλʔϑΣʔε͕ࣅ͍ͯΔ ͷͰٯʹࠞಉͦ͠͏
16. ײ૝ᶅ Authͷඪ४࢓༷͕ͳ͍ʂʢGraphQLͱͯ͠͸؅׋ ֎ʁʣϏδωεϩδοΫͰ΍Εͱ͔ɺJWTΛ࢖͏ ͱ͔ఏҊతʹ͸ॻ͍ͯ͋Δ ਺গͳ͍֎෦APIͱͯ͠ެ։͠ ͍ͯΔϓϥοτϑΥʔϜ͸ɺׂΓ੾ͬ ͯREST ͷOAuthΛྲྀ༻͍ͯ͠Δέʔε ͕ଟ͍ ʢࣗ෼΋ࢍ੒ʣ
17. ײ૝ᶆ APIΛ੡඼ͱͯ͠ఏڙ͢ΔଆʢϓϥοτϑΥʔϜʣ ͸ɺΑͬΆͲ͏·͘ઃܭ͠ͳ͍ͱແବʹϦιʔε ৯ΘΕͨΓɺެ։ൣғ΍՝ۚମܥͷॲཧ͕େมʹ ͳΓͦ͏ʢRESTͰendpoint୯ҐͰग़͠Θ͚Ͱ͖ͯ ͨ͜ͱ͕શ෦ॲཧϕʔεʹͳΔʣ
18. ײ૝ᶇ ݁ߏReactΑΓͩͳɾɾʢग़ࣗతʹ͠ΐ͏͕ͳ͍ؾ ΋͢Δ͚ͲɺReact͸ϋʔυϧߴ͍ਓଟ͍Α͏ͳʣ
19. ײ૝ᶈ • REST GETͩͱͲ͏ͯ͠΋දݱͮ͠Β͍ෳࡶͳΫ ΤϦʔΛAPIͰఏڙ͢Δʹ͸ظ଴௨Γ໾ཱͪͦ͏ • όʔδϣϯͳͲҙࣝͤͣ͞ήʔτ΢ΣΠ΍ݕࡧ Τϯδϯతʹ࢖͑ΔAPIʹ͸ྑ͍͔΋ • ͋ΕɺͰ΋ͦΜͳΫΤϦʹಛԽ͓ͨ͠ೃછΈͷ ΋ͷ͋ͬͨΑͳɾɾɾ
20. SɾQɾLʂ
21. ݁࿦ ͻΐͬͱͯࣗ͠෼͕ཉ͍͠ͷͬͯ͜͏͍͏΍ͭͩͬͨɾɾʁ 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)
22. ͓͋ͱ͕ΑΖ͍͠Α͏Ͱ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ