Slide 1

Slide 1 text

"QPMMP-JOLͰͰ͖Δ͜ͱ &*5ߴଜ

Slide 2

Slide 2 text

"QPMMP$MJFOUͱ"QPMMP-JOL "QPMMP-JOLͷجຊతͳಈ͖ ͢Ͱʹ͋Δ"QPMMP-JOL "QPMMP-JOLΛ஌͍ͬͯΕ͹ָ͕Ͱ͖ͨྫ

Slide 3

Slide 3 text

// Apollo Clientͷྫ client.query({ query: gql` query TodoApp { todos { id text completed } } `, }) .then(data => console.log(data)) .catch(error => console.error(error));

Slide 4

Slide 4 text

"QPMMP$MJFOUͱ"QPMMP-JOL IUUQTXXXBQPMMPHSBQIRMDPNEPDTMJOLPWFSWJFXIUNM͔ΒҾ༻ (SBQI2- $POTVNFS

Slide 5

Slide 5 text

"QPMMP$MJFOUͱ"QPMMP-JOL "QPMMP$MJFOU͸(SBQI2-$MJFOUͱͯ͠ͷΠϯλʔϑΣʔεΛ ఏڙʢϦΫΤετͳͲͷػೳ͸ͳ͍ʣɻ"QPMMP-JOLʹґଘ "QPMMP-JOL͸ΫΤϦ࣌ͷϛυϧ΢ΣΞͱͯ͠ͷத਎ͷػೳΛ ఏڙ ΫΤϦΛ࢖࣮ͬͯࡍԿΛ͢Δ͔ʢϦΫΤετͳͲʣɺϨε ϙϯεΛͲ͏͍ͨ͠ͷ͔ʢΩϟογϡ͸·ͨผʣɺΤϥʔ ΛͲ͏͢Δ͔ "QPMMP-JOL͸൚༻తͰ3FMBZͳͲͰ΋࢖͑ΔΑ͏࡞ΒΕ͍ͯΔ

Slide 6

Slide 6 text

௨ৗϛυϧ΢ΣΞͷྫ ΫΤϦɺϨεϙϯεͷՃ޻

Slide 7

Slide 7 text

// Ϩεϙϯεʹରͯ͠Կ͔͢Δྫ const link1 = new ApolloLink((operation, forward) => {
 // GraphQLΫΤϦΛ࢖ͬͯԿ͔͢Δ // ଞͷlinkͰ࢖͏σʔλΛContextʹࡌͤΔ // forward() Ͱ࣍ͷlinkΛݺͿ
 return forward(operation).map(data => {
 // Ϩεϙϯεʹରͯ͠Կ͔͢Δ return {...data, additional: '௥Ճͷ஋' }; }); });

Slide 8

Slide 8 text

// Ճ͑ͯΤϥʔʹରͯ͠Կ͔͢Δྫ 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 } ); }); });

Slide 9

Slide 9 text

5FSNJOBUJOH-JOL ࣍ͷMJOLΛݺ͹ͳ͍ɻ
 αʔόϦΫΤετͳͲͯ͠ϛυϧ΢ΣΞνΣʔϯΛંΓฦ͢

Slide 10

Slide 10 text

IUUQTHJUIVCDPNBQPMMPHSBQIRMBQPMMPMJOLUSFFNBTUFSQBDLBHFTBQPMMPMJOLQVSQPTF
 ΑΓҾ༻ ંΓฦͯ͠Δ

Slide 11

Slide 11 text

// 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()); }); });

Slide 12

Slide 12 text

// Apollo LinkνΣʔϯͷྫ const client = new ApolloClient({ link: ApolloLink.from([ link1, link2, httpLink, ]), cache, });

Slide 13

Slide 13 text

"QPMMP-JOLͷ0CTFSWBCMF͸3FBDUJWF&YUFOTJPOTΈ͍ͨɻ
 ࡉ͔͍࢓༷͸಺෦Ͱ࢖͍ͬͯΔ[FOPCTFSWBCMFΛ஌ΔͱΑͦ͞͏ɻ
 IUUQTHJUIVCDPN[FOQBSTJOH[FOPCTFSWBCMFPCTFSWBCMFTVCTDSJCFOFYUDBMMCBDL FSSPSDBMMCBDLDPNQMFUFDBMMCBDL

Slide 14

Slide 14 text

͢Ͱʹ͋Δ"QPMMP-JOL IUUQTXXXBQPMMPHSBQIRMDPNEPDTMJOLMJOLTMJTU IUUQTXXXBQPMMPHSBQIRMDPNEPDTMJOLMJOLT DPNNVOJUZIUNM

Slide 15

Slide 15 text

"QPMMP-JOLΛ஌͍ͬͯΕ͹
 ָ͕Ͱ͖ͨྫ

Slide 16

Slide 16 text

3FEVY͕ཁΒͳ͍ BQPMMPMJOLTUBUF ίϯϙʔωϯτ·ͨ͗Ͱ࢖͏ঢ়ଶΛอ࣋ )551ӽ͠ͷσʔλͱಉ͡(SBQI2-ΫΤϦͰ࢖͑Δ خ͠͞ ࠓͩͱ3FBDU)PPLT΋બ୒ࢶʢWʣ

Slide 17

Slide 17 text

3FTPMWFSͷڞ௨Τϥʔ
 Λॲཧ BQPMMPMJOLFSSPS ͜ΕΛ஌Βͳ͔͕ͬͨͨΊʹ
 3FTPMWFSΛԚ͠·ͬͨ͘͜ͱ͕͋Δ IUUQTHJUEFWMJOFDPSQDPN)35FDI NN@JNQSPWFQVMMpMFT

Slide 18

Slide 18 text

࿈ଓϦΫΤετΛ཈੍ BQPMMPMJOLCBUDI ࢼͯ͠Έͨʢಈըʣ ະݕূ͕ͩ*OQVU4DSFFOͰͷ࿈ଧΫϥογϡ͕
 ௚Δ͔΋͠Εͳ͍

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

4FSWJDF8PSLFSΛ࢖ͬͨ
 8FC4PDLFU BQPMMPMJOLXT͸ϝΠϯεϨουͰ84ͱ઀ଓ ͍ͭͰ΋04௨஌͢ΔͨΊʹ͸
 όοΫάϥ΢ϯυͰ઀ଓ͢Δඞཁ Ϋϩʔϯͯ͠վ଄͢Ε͹ʢະݕূͰ͢ʣ

Slide 22

Slide 22 text

#JPHSBQIZ"1*Λ௚઀࢖͏ BQPMMPMJOLSFTU BQPMMPMJOLIUUQͰઃఆͨ͠ΤϯυϙΠϯτͱ͸
 ผͷ৔ॴʹ3&45ϦΫΤετ͕Մೳ 3FTPMWFSͰؤுΔඞཁͳ͍

Slide 23

Slide 23 text

Ҏ্Ͱ͢ "QPMMP$MJFOUͱ"QPMMP-JOL "QPMMP-JOLͷجຊతͳಈ͖ ͢Ͱʹ͋Δ"QPMMP-JOL "QPMMP-JOLΛ஌͍ͬͯΕ͹ָ͕Ͱ͖ͨྫ