GraphQL Directiveを試してみた

GraphQL Directiveに可能性を感じたので、Apollo Serverでカスタムディレクティブを作ってみたのと、その考察です。

Transcript

1. (SBQI2-
   %JSFDUJWFTΛ ࢼͯ͠Έͨ &*5
   ߴଜ
2. (SBQI2-
   %JSFDUJWFT
   ͱ͸Կ͔ʁ
3. ࠷ॳ͔Β͋ΔσΟϨΫςΟϒ
   IUUQTXXXBQPMMPHSBQIRMDPNEPDTBQPMMPTFSWFSGFBUVSFT EJSFDUJWFTIUNM%FGBVMU%JSFDUJWFT
4. ಠ࣮ࣗ૷ྫ
   IUUQTXXXBQPMMPHSBQIRMDPNEPDTHSBQIRMUPPMTTDIFNB EJSFDUJWFTIUNM&YBNQMFT
5. Ͳ͏͍͏छྨ͕
 ͋Δͷ͔ʁ
6. εΩʔϚͰ࢖͏ IUUQTHJUIVCDPNHSBQIRMHSBQIRMKTCMPC BFFBEBCEDGDBGFTSDMBOHVBHF EJSFDUJWF-PDBUJPOKT--
7. ϦΫΤετͰ࢖͏ IUUQTHJUIVCDPNHSBQIRMHSBQIRMKTCMPC BFFBEBCEDGDBGFTSDMBOHVBHF EJSFDUJWF-PDBUJPOKT--
8. ࢖ͬͯΈ͍ͨ
   ☺
9. ͓୊ w ഑ྻΛฦ͢ෳ਺ͷ3&45GVM
   "1*
   63-Λ౉͢ͱɺ
 ݁ՌΛܨ͛ͯฦͯ͘͠ΕΔ
 !DPODBU VSMT
   
   σΟϨΫςΟϒ
10. σΟϨΫςΟϒΛએݴ
11. # .graphql directive @concat(urls: [String]) on FIELD_DEFINITION
12. σΟϨΫςΟϒΛ࣮૷
13. // .js import { SchemaDirectiveVisitor } from 'apollo-server'; class ConcatDirective extends SchemaDirectiveVisitor { visitFieldDefinition(fieldDefinition) { const { urls } = this.args; fieldDefinition.resolve = (obj, args, context, info) => Promise.all( urls.map( url => fetch(url).then( res => res.json() ) ) ).then( rs => rs.reduce((xs, arr) => [...xs, ...arr], []), ); } } export const schemaDirectives = { concat: ConcatDirective, };
14. ͦΕΛεΩʔϚͰ࢖͏
15. # .graphql type Issue { id: String url: String } type RootQuery { # ... ghissues: [Issue] @concat(urls: [ "https://api.github.com/repos/apollographql/apollo-link/issues", "https://api.github.com/repos/apollographql/apollo-client/issues", "https://api.github.com/repos/apollographql/apollo-server/issues", ]) }
16. ͦͷΫΤϦΛୟ͘
17. # .graphql query { ghissues { id url } }
18. # the graphql response { data: { ghissues: [ { id: 393044392, url: https://api.github.com/repos/apollographql/apollo-link/issues/897 }, // ... { id: 392713767, url: https://api.github.com/repos/apollographql/apollo-client/issues/4252 }, // ... { id: 386114424, url: https://api.github.com/repos/apollographql/apollo-server/issues/2051 } ] } }
19. w 3&45GVM
    "1*͕࠶ར༻Մೳͳ΋ͷʹͳΕ͹ͳΔ΄Ͳɺ(SBQI2-
    3FTPMWFS࣮૷͸୯ௐͳ΋ͷʹͳΔɻͦ͜Λղܾ͢Δ
    w ʮεΩʔϚͰఆٛͨ͠63-ʹର͠ɺϢʔβϦΫΤετ࣌ʹύ ϥϝʔλΛ௥ՃʯͳͲ΋΋ͪΖΜՄೳ
    w '*&-%ΑΓ΋ɺ(SBQI2-αʔόଆΛ֦ு͢Δ '*&-%@%&'*/*5*0/ͷํ͕ເ͕޿͕Δײ͋Δ
    w ࡞Δ࣌ɺ(SBQI2-γϯλοΫεΤϥʔʹؾ෇͖΍͍͢Α͏ૉ ૣ͘ىಈͰ͖Δঢ়ଶΛ࡞͓͚ͬͯ͹͔ͳΓָ
 ʢ34,ͰΫϥΠΞϯτίʔυͷίϯύΠϧΛؚΊىಈͯͨ͠ Β৸ͦ͏ʹͳͬͨʣ
20. // ./dev-graphql-server.js import { ApolloServer } from 'apollo-server'; global.__DEV__ = true; const { default: schema } = require('./src/data/schema'); new ApolloServer(schema).listen().then(({ url }) => { console.log(` Server ready at ${url}`); }); (SBQI2-αʔόͷΈΛ5SZ&SSPSͰ͖ΔΑ͏ʹ͓ͯ͘͠
21. w (SBQI2-ͷޙΖͷ࣮૷Λແͤ͘Δເ
    w ϑϩϯτΤϯυΤϯδχΞ͕ɺ(SBQI2-εΩʔϚͱϑϩϯτͷ
 ίʔυΛॻ͚ͩ͘Ͱׂͱڽͬͨ8FCΞϓϦΛσϓϩΠ͢Δະདྷ
    w ྫ͑͹
    !NZTRM
    ΍
    !SFEJT
    ͳͲͱ͍ͬͨσΟϨΫςΟϒΛ࡞Ε͹ɺ
 ετϨʔδ઀ଓ෦෼ͷ࣮૷ͳ͠Ͱσʔλऔಘɾॻ͖׵͑Ͱ͖ͦ͏ɻ
 !BVUI
    ΋࢓༷ΛݻΊΒΕΕ͹͔ͳΓεέʔϧͦ͠͏
    w ΧελϜσΟϨΫςΟϒҰࣜΛ഑෍ͯ͠Δ੎
 IUUQTXXXOQNKTDPNQBDLBHFHSBQIRMDVTUPNEJSFDUJWFT
 !EBUF BTz::::
    ͱ͔͸͸·Ε͹ڧͦ͏ʣ
    w (SBQI2-εΩʔϚͰ%#εΩʔϚ΋ࡁ·ͤΔ੎
 IUUQTXXXOQNKTDPNQBDLBHFHSBQIRMEJSFDUJWFTRM