Apollo Linkでできること

Transcript

1. "QPMMP
   -JOLͰͰ͖Δ͜ͱ &*5
   ߴଜ
2. "QPMMP
   $MJFOUͱ"QPMMP
   -JOL
   "QPMMP
   -JOL
   ͷجຊతͳಈ͖
   ͢Ͱʹ͋Δ"QPMMP
   -JOL
   "QPMMP
   -JOLΛ஌͍ͬͯΕ͹ָ͕Ͱ͖ͨྫ
3. // Apollo Clientͷྫ client.query({ query: gql` query TodoApp { todos { id text completed } } `, }) .then(data => console.log(data)) .catch(error => console.error(error));
4. "QPMMP
   $MJFOUͱ"QPMMP
   -JOL IUUQTXXXBQPMMPHSBQIRMDPNEPDTMJOLPWFSWJFXIUNM
   ͔ΒҾ༻ (SBQI2- $POTVNFS
5. "QPMMP
   $MJFOUͱ"QPMMP
   -JOL "QPMMP
   $MJFOU
   ͸
   (SBQI2-
   $MJFOUͱͯ͠ͷΠϯλʔϑΣʔεΛ ఏڙʢϦΫΤετͳͲͷػೳ͸ͳ͍ʣɻ"QPMMP
   -JOLʹґଘ
   "QPMMP
   -JOL
   ͸ΫΤϦ࣌ͷϛυϧ΢ΣΞͱͯ͠ͷத਎ͷػೳΛ ఏڙ
   ΫΤϦΛ࢖࣮ͬͯࡍԿΛ͢Δ͔ʢϦΫΤετͳͲʣɺϨε ϙϯεΛͲ͏͍ͨ͠ͷ͔ʢΩϟογϡ͸·ͨผʣɺΤϥʔ ΛͲ͏͢Δ͔
   "QPMMP
   -JOL
   ͸൚༻తͰ
   3FMBZ
   ͳͲͰ΋࢖͑ΔΑ͏࡞ΒΕ͍ͯΔ
6. ௨ৗϛυϧ΢ΣΞͷྫ ΫΤϦɺϨεϙϯεͷՃ޻
7. // Ϩεϙϯεʹରͯ͠Կ͔͢Δྫ const link1 = new ApolloLink((operation, forward) => {
 // GraphQLΫΤϦΛ࢖ͬͯԿ͔͢Δ // ଞͷlinkͰ࢖͏σʔλΛContextʹࡌͤΔ // forward() Ͱ࣍ͷlinkΛݺͿ
 return forward(operation).map(data => {
 // Ϩεϙϯεʹରͯ͠Կ͔͢Δ return {...data, additional: '௥Ճͷ஋' }; }); });
8. // Ճ͑ͯΤϥʔʹରͯ͠Կ͔͢Δྫ const link2 = new ApolloLink((operation, forward) => {
 // GraphQLΫΤϦΛ࢖ͬͯԿ͔͢Δ // ଞͷlinkͰ࢖͏σʔλΛContextʹࡌͤΔ return new Observable(observer => { return forward(operation).subscribe( data => { // Ϩεϙϯεʹରͯ͠Կ͔͢Δ observer.next({...data, additional: '௥Ճͷ஋' }); }, error => { // GraphQLΤϥʔʹରͯ͠Կ͔͢Δ observer.error(error); }, (...args) => { // Finally } ); }); });
9. 5FSNJOBUJOH
   -JOL ࣍ͷMJOLΛݺ͹ͳ͍ɻ
 αʔόϦΫΤετͳͲͯ͠ϛυϧ΢ΣΞνΣʔϯΛંΓฦ͢
10. IUUQTHJUIVCDPNBQPMMPHSBQIRMBQPMMPMJOLUSFFNBTUFSQBDLBHFTBQPMMPMJOLQVSQPTF
 ΑΓҾ༻ ંΓฦͯ͠Δ
    
11. // apollo-link-http ͷ؆қ࣮૷ྫ const httpLink = new ApolloLink(operation => { return new Observable(observer => { const key = operation.toKey(); const query = key.slice(0, key.length - ‘|{}| null'.length); fetch(url, { method: 'POST', headers: { 'content-type': 'application/json', }, body: JSON.stringify({ operationName: operation.operationName, variables: operation.variables, query, }), }) .then(res => res.json()) .then(json => observer.next(json)) .catch(json => observer.error(json)) .finally(() => observer.complete()); }); });
12. // Apollo LinkνΣʔϯͷྫ const client = new ApolloClient({ link: ApolloLink.from([ link1, link2, httpLink, ]), cache, });
13. "QPMMP
    -JOL
    ͷ
    0CTFSWBCMF
    ͸
    3FBDUJWF
    &YUFOTJPOT
    Έ͍ͨɻ
 ࡉ͔͍࢓༷͸಺෦Ͱ࢖͍ͬͯΔ
    [FOPCTFSWBCMF
    Λ஌ΔͱΑͦ͞͏ɻ
 IUUQTHJUIVCDPN[FOQBSTJOH[FOPCTFSWBCMFPCTFSWBCMFTVCTDSJCFOFYUDBMMCBDL FSSPSDBMMCBDLDPNQMFUFDBMMCBDL
14. ͢Ͱʹ͋Δ"QPMMP
    -JOL
    IUUQTXXXBQPMMPHSBQIRMDPNEPDTMJOLMJOLTMJTU
    
    IUUQTXXXBQPMMPHSBQIRMDPNEPDTMJOLMJOLT DPNNVOJUZIUNM
15. "QPMMP
    -JOLΛ஌͍ͬͯΕ͹
 ָ͕Ͱ͖ͨྫ
16. 
    3FEVY͕ཁΒͳ͍ BQPMMPMJOLTUBUF
    ίϯϙʔωϯτ·ͨ͗Ͱ࢖͏ঢ়ଶΛอ࣋
    )551ӽ͠ͷσʔλͱಉ͡(SBQI2-ΫΤϦͰ࢖͑Δ خ͠͞
    ࠓͩͱ
    3FBDU
    )PPLT
    ΋બ୒ࢶʢ
    Wʣ
17. 
    3FTPMWFSͷڞ௨Τϥʔ
 Λॲཧ BQPMMPMJOLFSSPS
    ͜ΕΛ஌Βͳ͔͕ͬͨͨΊʹ
 3FTPMWFSΛԚ͠·ͬͨ͘͜ͱ͕͋Δ
    
    IUUQTHJUEFWMJOFDPSQDPN)35FDI NN@JNQSPWFQVMMpMFT
18. 
    ࿈ଓϦΫΤετΛ཈੍ BQPMMPMJOLCBUDI
    ࢼͯ͠Έͨʢಈըʣ
    ະݕূ͕ͩ
    *OQVU
    4DSFFOͰͷ
    
    ࿈ଧΫϥογϡ͕
 ௚Δ͔΋͠Εͳ͍
21. 
    4FSWJDF
    8PSLFSΛ࢖ͬͨ
 8FC4PDLFU BQPMMPMJOLXT
    ͸ϝΠϯεϨουͰ84ͱ઀ଓ
    ͍ͭͰ΋04௨஌͢ΔͨΊʹ͸
 όοΫάϥ΢ϯυͰ઀ଓ͢Δඞཁ
    Ϋϩʔϯͯ͠վ଄͢Ε͹ʢະݕূͰ͢ʣ
22. 
    #JPHSBQIZ
    "1*Λ௚઀࢖͏ BQPMMPMJOLSFTU
    BQPMMPMJOLIUUQ
    Ͱઃఆͨ͠ΤϯυϙΠϯτͱ͸
 ผͷ৔ॴʹ
    3&45
    ϦΫΤετ͕Մೳ
    3FTPMWFSͰؤுΔඞཁͳ͍
23. Ҏ্Ͱ͢ "QPMMP
    $MJFOUͱ"QPMMP
    -JOL
    "QPMMP
    -JOL
    ͷجຊతͳಈ͖
    ͢Ͱʹ͋Δ"QPMMP
    -JOL
    "QPMMP
    -JOLΛ஌͍ͬͯΕ͹ָ͕Ͱ͖ͨྫ