Ionic and GraphQL

Ionic and GraphQL

How to integrate GraphQL API into your Ionic app.

893f54413c2bd9ba41d11d753aacaf2c?s=128

Yosuke Kurami

August 05, 2017
Tweet

Transcript

  1. 8.
  2. 13.

    1. Single Endpoint (SBQI2-RVFSZFYBNQMF query RepoSummary { repository(name: "ionic", owner:

    "ionic-team") { createdAt, issues(states: OPEN) { totalCount } stargazers { totalCount } watchers { totalCount } } } https://developer.github.com/v4/explorer/
  3. 14.

    1. Single Endpoint w &OEQPJOU͕ఏڙ͢Δ"1*ύλʔϯ͸छྨ w 2VFSZ͍ΘΏΔ(&5૬౰҆શ͔ͭႈ౳ͳૢ࡞Λެ։ w .VUBUJPO͍ΘΏΔ10451"5$)165%&-&5&૬౰
 ഁյతมߋΛͱ΋ͳ͏ૢ࡞Λެ։͢Δ

    w 4VCTDSJQUJPO͍ΘΏΔ1VC4VCʹ͓͚Δߪಡʹ૬౰
 ࣮૷ʹ͸4FSWFS4JEF1VTI͕ඞཁͱͳΔ
 ݱঢ়͸XTͰUSBOTQPSU͢Δ͜ͱ͕ଟ͍
  4. 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
  5. 19.

    Caveat w όοΫΤϯυͷ࣮૷ߟྀ఺͕ࢁͷΑ͏ʹ͋Δ
 / ໰୊ ηΩϡϦςΟ FUD  w ϑΟʔϧυΛͭͭࢦఆ͢Δ෼ɺϑϩϯτͷ࣮૷ෛՙ΋ߴ

    ͘ͳΓ͔Ͷͳ͍ 3&45Ͱ͸ΤϯυϙΠϯτΛࢦఆ͢Δ͚ͩ ͰࡁΜͰ͍ͨ  w 3&45Ͱഓͬͨϊ΢ϋ΢΍πʔϧ͕׆͔ͤͳ͍
 ΤϥʔεςʔλεΛͲ͏ઃܭ͢Δ͔ʁ౳
  6. 20.

    Pros / Cons w 1SPT w "1*ʹੑೳͱϦιʔεઃܭͷ྆໘Λ୲อͰ͖Δ w ϚϧνΫϥΠΞϯτ 1$XFC.PCJMF

    ରԠ͠΍͍͢ w ܕεΩʔϚʹΑΓɺपลπʔϧΛ࡞Γ΍͍͢ w $POT w όοΫΤϯυϑϩϯτΤϯυͱ΋ʹ࣮૷ෛՙߴΊ
  7. 22.

    Client Libraries w 'BDFCPPL3FMBZ w 3FMBZ2-౳ɺಠ੍ࣗ໿͕ڧ͍ ΄΅ϑϨʔϜϫʔΫ  w 3FBDU3FBDUOBUJWF

    #BCFMͱͷ૬ੑ͸ྑ͍ w "QPMMP w ରԠݴޠ'84XJGU+BWB3FBDU"OHVMBS w ػೳ͸ബΊɻ୞ͷ$MJFOUϥΠϒϥϦ
  8. 23.

    Backend as a Service w αΫοͱϞόΠϧ։ൃΛ͍ͨ͠৔߹ͷબ୒ࢶ w ͪͳΈʹ"OHVMBSք۾Ͱ͸'JSFCBTF͕ڧ͍ w 'JSFCBTF'VODUJPOTͰ(SBQI2-TFSWFͨ͠ྫ΋

    w ୯ҰΤϯυϙΠϯτͷ෼ɺϦιʔεϚοϐϯάָ͕ͳͷͰɺ 4FSWFSMFTT"SDIJUFDUVSF (SBQI2-͸݁ߏ؆୯
  9. 24.

    GraphQL BaaS w 3FJOEFY IUUQTBDDPVOUTSFJOEFYJP 
 (SBQI2-#BB4૲෼͚తଘࡏɻ࠷ۙͷ׆ಈ͸΄΅θϩʜ w HSBQIDPPM IUUQTDPOTPMFHSBQIDPPM

    
 "84্ʹߏங͞Εͨ#BB4
 5PLZP3FHJPO BQOPSUIFBTU ΋બ୒Մೳ w TDBQIPME IUUQTTDBQIPMEJPBQQT 
 ൺֱత࠷ۙʹϩʔϯν͞Εͨ#BB4"84͔Ͳ͏͔͸ෆ໌ͩ ͚Ͳɺݱঢ়બ୒ՄೳSFHJPO͸VTXFTUPSFVSPQFͷΈ
  10. 25.
  11. 27.

    Type Propagation w HSBQIDPPM
 4DIFNBΛ+40/ܗࣜͰΤΫεϙʔτ w UTHSBQIRMQMVHJO ࣗ࡞ 
 54-BOHVBHF4FSWJDFͰ4DIFNBKTPOΛಡΈ͜Ή


    ίʔυதͰΫΤϦͷิ׬͕༗ޮʹ w BQPMMPDPEFHFO
 5BHHFE5FNQMBUF-JUFSBM಺ͷΫΤϦΛύʔε͠ɺ
 54ͷUZQFBOOPUBUJPOΛੜ੒
  12. 28.

    Type Propagation w BQPMMPBOHVMBS
 ੜ੒͞ΕͨUZQFΛDMJFOUʹ৯ΘͤΔ͜ͱͰɺ3YKT4USFBN ΛಘΔ w !BOHVMBSDPSF
 BTZODQJQFʹΑΓTUSFBN͔ΒΫΤϦ݁ՌΛऔΓग़͢ w

    !BOHVMBSMBOHVBHFTFSWJDF
 ΫΤϦ݁Ռ (SBQI2-GSBHNFOU ͷUZQFBOOPUBUJPOΛར ༻ͯ͠ɺ"OHVMBSUFNQMBUFதͰ΋ϓϩύςΟิ׬
  13. 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[]>
  14. 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
  15. 32.
  16. 36.
  17. 37.

    IAM