Ionic and GraphQL

How to integrate GraphQL API into your Ionic app.

Transcript

1. Ionic and GraphQL 2017.08.06 by Yosuke Kurami
2. Today’s theme
3. *POJDυॳ৺ऀͷԶ͕Ͳ͏ʹ͔
   *POJD
   
   (SBQI2-
   BQQ࡞ͬͯΈͨ࿩
4. EJTDMBJNFS
   ΄΅(SBQI2-ͷ࿩͔͠͠·ͤΜ
   
5. Agenda • Demonstration • Introduction to GraphQL • How to integrate GraphQL into Ionic
6. Demonstration
7. App is here: https://quramy.github.io/ionic-gql- messenger/index.html or Ionic view APP ID: 59554521
9. Do you know GraphQL ?
10. What’s GraphQL w 'BDFCPPL͕ఏএ͍ͯ͠Δ2VFSZ
    -BOHVBHF
    w ೥ʹެ։ɻҰԠ3'$ͷ૲Ҋ΋͋Δ
    w ࢀর࣮૷͸+BWB4DSJQU
    ଞݴޠϥΠϒϥϦ࣮૷΋ଟ͍
    w (JU)VC͕ඪ४ WFSTJPO
     "1*ͱͯ͠࠾༻ ݄ʙ
    w ҰํͰɺΠϚΠνྲྀߦͬͯͳ͍ٙ࿭΋ʜ
11. Features of GraphQL  ୯ҰΤϯυϙΠϯτ
     %FNBOE
    %SJWFO
    "SDIJUFDUVSF
     #VJMUJOͳܕͱεΩʔϚػߏ
12. 1. Single Endpoint w ྫ
    (JU)VC
    W
    "1*
    w IUUQTBQJHJUIVCDPNHSBQIRM
    ͷΈ
    w )551ϝιου͸
    1045
    w CPEZ BQQMJDBUJPOKTPO ͷ
    query
    ͰΫΤϦΛදݱ
13. 1. Single Endpoint (SBQI2-
    RVFSZ
    FYBNQMF query RepoSummary { repository(name: "ionic", owner: "ionic-team") { createdAt, issues(states: OPEN) { totalCount } stargazers { totalCount } watchers { totalCount } } } https://developer.github.com/v4/explorer/
14. 1. Single Endpoint w &OEQPJOU͕ఏڙ͢Δ"1*ύλʔϯ͸छྨ
    w 2VFSZ
    ͍ΘΏΔ(&5૬౰
    ҆શ͔ͭႈ౳ͳૢ࡞Λެ։
    w .VUBUJPO
    ͍ΘΏΔ
    10451"5$)165%&-&5&
    ૬౰
 ഁյతมߋΛͱ΋ͳ͏ૢ࡞Λެ։͢Δ
    w 4VCTDSJQUJPO
    ͍ΘΏΔ1VC4VCʹ͓͚Δߪಡʹ૬౰
 ࣮૷ʹ͸4FSWFS
    4JEF
    1VTI͕ඞཁͱͳΔ
 ݱঢ়͸XT
    ͰUSBOTQPSU͢Δ͜ͱ͕ଟ͍
15. 2. Demand Driven Architecture w ʮཉ͍͠৘ใΛཉ͍͠෼͚ͩʯཁٻͰ͖Δ࢓૊Έͷ͜ͱ
    w ઌͷ(JU)VCͷྫͰ͋Ε͹ɺ(SBQI2-Ͱ͸Ұ౓ʹ 3FQPTJUPSZͱͦͷJTTVFͷৄࡉΛऔಘ͢Δ͜ͱ΋Ͱ͖Δ
    w ରͯ͠3&45΍40"1ͷΑ͏ʹ3FTQPOTFͷܕ͕ݻఆ͞ΕΔ ܗࣜͷ࢓૊͸4VQQMZ
    %SJWFO
    "SDIJUFDUVSFͱݺͿ
    w 42-
    
    41"32-
    
    +40/
    (SBQI 'BMDPS
    FUD https://qconnewyork.com/ny2015/system/files/presentation-slides/ qcon_dda_2015_iwork09_boguta_nolen.pdf
16. Mobile and DDA w ʮը໘ʹඞཁͳ৘ใΛඞཁͳλΠϛϯάͰཁٻͰ͖Δʯ
 ͱ͍͏͜ͱ͸ɺϦΫΤετճ਺
    
    ଳҬཁٻ͕γϏΞͳαʔ ϏεͰద༻ͯͦ͜͠༏Ґੑ͕ൃشͰ͖Δ
    w ઀ଓ؀ڥ͕ܙ·Ε͍ͯΔ1$ΞϓϦΑΓ΋ɺ(ͰઓΘͶ͹ ͳΒͳ͍Α͏ͳϞόΠϧΞϓϦʹͦ͜ɺ(SBQI2-͸޲͍ͯ ͍ΔͷͰ͸ɻ
17. 3. Schema System w (SBQI2-ͷΤϯυϙΠϯτ͸ެ։͢ΔσʔλεΩʔϚΛఆٛ ͢Δඞཁ͕͋Δ
    w (SBQI2-࢓༷ࣗମʹܕػߏ͕૊Έࠐ·Ε͍ͯΔͨΊɺ
 ίʔυੜ੒΍3PVUJOHϥΠϒϥϦ͕ߏங͠΍͍͢ type Repository implements Node { id: ID! number: Number! createdAt: DateTime! issues: [Issue] : }
18. 3. Schema System
19. Caveat w όοΫΤϯυͷ࣮૷ߟྀ఺͕ࢁͷΑ͏ʹ͋Δ
 /
    
    ໰୊
    ηΩϡϦςΟ
    FUD
    
    
    w ϑΟʔϧυΛͭͭࢦఆ͢Δ෼ɺϑϩϯτͷ࣮૷ෛՙ΋ߴ ͘ͳΓ͔Ͷͳ͍ 3&45Ͱ͸ΤϯυϙΠϯτΛࢦఆ͢Δ͚ͩ ͰࡁΜͰ͍ͨ
    w 3&45Ͱഓͬͨϊ΢ϋ΢΍πʔϧ͕׆͔ͤͳ͍
 ΤϥʔεςʔλεΛͲ͏ઃܭ͢Δ͔ʁ౳
20. Pros / Cons w 1SPT
    w "1*ʹੑೳͱϦιʔεઃܭͷ྆໘Λ୲อͰ͖Δ
    w ϚϧνΫϥΠΞϯτ 1$
    XFC.PCJMF
    ରԠ͠΍͍͢
    w ܕεΩʔϚʹΑΓɺपลπʔϧΛ࡞Γ΍͍͢
    w $POT
    w όοΫΤϯυ
    
    ϑϩϯτΤϯυͱ΋ʹ࣮૷ෛՙߴΊ
21. How to integrate GraphQL into Ionic Apps
22. Client Libraries w 'BDFCPPL
    3FMBZ
    w 3FMBZ
    2-౳ɺಠ੍ࣗ໿͕ڧ͍ ΄΅ϑϨʔϜϫʔΫ
    w 3FBDU
    
    3FBDU
    OBUJWF
    #BCFMͱͷ૬ੑ͸ྑ͍
    w "QPMMP
    w ରԠݴޠ
    '8
    4XJGU
    
    +BWB
    
    3FBDU
    
    "OHVMBS
    
    w ػೳ͸ബΊɻ୞ͷ$MJFOUϥΠϒϥϦ
    
23. Backend as a Service w αΫοͱϞόΠϧ։ൃΛ͍ͨ͠৔߹ͷબ୒ࢶ
    w ͪͳΈʹ"OHVMBSք۾Ͱ͸'JSFCBTF͕ڧ͍
    w 'JSFCBTF
    'VODUJPOTͰ(SBQI2-
    TFSWFͨ͠ྫ΋
    w ୯ҰΤϯυϙΠϯτͷ෼ɺϦιʔεϚοϐϯάָ͕ͳͷͰɺ 4FSWFSMFTT
    "SDIJUFDUVSF
    
    (SBQI2-͸݁ߏ؆୯
24. GraphQL BaaS w 3FJOEFY
    
    IUUQTBDDPVOUTSFJOEFYJP 
 (SBQI2-
    #BB4૲෼͚తଘࡏɻ࠷ۙͷ׆ಈ͸΄΅θϩʜ
    w HSBQIDPPM
    IUUQTDPOTPMFHSBQIDPPM 
 "84্ʹߏங͞Εͨ#BB4
    
 5PLZP
    3FHJPO BQOPSUIFBTU ΋બ୒Մೳ
    w TDBQIPME
    IUUQTTDBQIPMEJPBQQT 
 ൺֱత࠷ۙʹϩʔϯν͞Εͨ#BB4
    "84͔Ͳ͏͔͸ෆ໌ͩ ͚Ͳɺݱঢ়બ୒ՄೳSFHJPO͸VTXFTU
    PS
    FVSPQFͷΈ
26. It’s time to dev!
27. Type Propagation w HSBQIDPPM
 4DIFNBΛ+40/ܗࣜͰΤΫεϙʔτ
    w UTHSBQIRMQMVHJO
    ࣗ࡞ 
    
 54
    -BOHVBHF
    4FSWJDFͰ4DIFNBKTPOΛಡΈ͜Ή
 ίʔυதͰΫΤϦͷิ׬͕༗ޮʹ
    w BQPMMPDPEFHFO
 5BHHFE
    5FNQMBUF
    -JUFSBM಺ͷΫΤϦΛύʔε͠ɺ
 54ͷUZQF
    BOOPUBUJPOΛੜ੒
28. Type Propagation w BQPMMPBOHVMBS
 ੜ੒͞ΕͨUZQFΛDMJFOUʹ৯ΘͤΔ͜ͱͰɺ3YKT
    4USFBN ΛಘΔ
    w !BOHVMBSDPSF
 BTZOD
    QJQFʹΑΓTUSFBN͔ΒΫΤϦ݁ՌΛऔΓग़͢
    w !BOHVMBSMBOHVBHFTFSWJDF
 ΫΤϦ݁Ռ (SBQI2-
    GSBHNFOU ͷUZQF
    BOOPUBUJPOΛར ༻ͯ͠ɺ"OHVMBS
    UFNQMBUFதͰ΋ϓϩύςΟิ׬
29. .ts or .graphql ? w BQPMMPDPEFHFO͸HSBQIRMϑΝΠϧʹهड़͞ΕͨRVFSZ NVUBUJPO͔ΒUZQF
    BOOPUBUJPOΛੜ੒͢Δ͜ͱ΋Մೳ
    w ͜ͷ৔߹
    HSBQIRMUBHMPBEFSͱ͍͏XFCQBDL
    MPBEFSΛ ࢖͏ඞཁ͕ੜ͡ΔͨΊɺJPOJDBQQTDSJQUTDPOpH XFCQBDLDPOpHKTʹ௥ه͠·͠ΐ͏
30. GraphQL Result as Observable w BQPMMPBOHVMBSͷ
    RVFSZNVUBUJPOTVCTDSJQUJPO
    ࣮ߦ݁ Ռ͸ɺશͯ
    0CTFSWBCMF
    Λฦ٫ const users$ = this.apollo.query<UsersQuery>({ query: users }) .map(({ data }) => data.allUsers) ; // typeof users$: Observable<UserFragment[]>
31. GraphQL Result as Observable ύζϧ
    
    2VFSZ.VUBUJPO4VCTDSJQUJPO͔Βɺ
 this.timeline$: Observable<Message[]>
    Λ࡞ͬͯΈΑ͏ const latestMessages$: Observable<Message[]> = this.apollo.query({ query }); const myMessage$: Observable<Message> = this.apollo.mutate({ mutation }); const addedMessage$: Observable<Message> = this.apollo.subscribe({ subscription }); ճ౴͸ͪ͜Β: https://github.com/Quramy/ionic-gql-messenger/blob/master/src/pages/timeline/ timeline.ts#L68-L82
32. Summary
33. Summary w (SBQI2-ʹ͸ͭΒΈ΋͋ΔҰํɺϞόΠϧͱͷ૊Έ߹Θͤ ʹ͸ເΛײ͡Δ
    w ࠷ۙͰ͸༷ʑͳ#BB4΋ొ৔͠ɺॳظίετ΋Լ͕͖ͬͯͯ ͍Δ
    w "QPMMPͱपลϥΠϒϥϦͷ׆༻Ͱɺշద։ൃ؀ڥ͕खʹೖ Δ
34. Resources 1/2 w %FNP
    "QQ
    3FQP
 IUUQTHJUIVCDPN2VSBNZJPOJDHRMNFTTFOHFS
    w *POJD
    BOE
    (SBQI2-
    HVJEF
    3FQP
 IUUQTHJUIVCDPN2VSBNZJPOJDBQPMMPTJNQMFBQQ
    w (SBQI2-
    5ZQF4DSJQU
    -BOHVBHF
    4FSWJDF
    QMVHJO
 IUUQTHJUIVCDPN2VSBNZUTHSBQIRMQMVHJO
35. Resources 2/2 w (SBQI2-
    5ZQF4DSJQU
    "OOPUBUJPO
    (FOFSBUPS
 IUUQTHJUIVCDPNBQPMMPHSBQIRMBQPMMPDPEFHFO
    w "OHVMBS
    "QPMMP
    $MJFOU
 IUUQEFWBQPMMPEBUBDPNBOHVMBS
    w HSBQIDPPM (SBQI2-
    #BB4 
 IUUQTDPOTPMFHSBQIDPPM
36. About me
37. IAM
38. એ఻ͦͷ w OHTBLFͱ͍͏"OHVMBS
    NFFUVQΛෆఆظ։࠵͍ͯ͠·͢
    w ୈճ͸
     Ր 
    w $POOQBTTͰ
    lOHTBLFz
    Ͱݕࡧͩʂ
39. એ఻ͦͷ w (SBQI2-
    5PLZPͱ͍͏.FFUVQΛ্ཱ͍ͪ͛ͯ·͢
    w NFFUVQDPN
    Ͱ
    l(SBQI2-
    5PLZPz
    ͬͯݕࡧͯ͠Ͷʂ
40. Thank you.