Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Apollo Linkでできること

piglovesyou
February 22, 2019

Apollo Linkでできること

piglovesyou

February 22, 2019
Tweet

More Decks by piglovesyou

Other Decks in Technology

Transcript

  1. // Apollo Clientͷྫ client.query({ query: gql` query TodoApp { todos

    { id text completed } } `, }) .then(data => console.log(data)) .catch(error => console.error(error));
  2. // Ϩεϙϯεʹରͯ͠Կ͔͢Δྫ const link1 = new ApolloLink((operation, forward) => {


    // GraphQLΫΤϦΛ࢖ͬͯԿ͔͢Δ // ଞͷlinkͰ࢖͏σʔλΛContextʹࡌͤΔ // forward() Ͱ࣍ͷlinkΛݺͿ
 return forward(operation).map(data => {
 // Ϩεϙϯεʹରͯ͠Կ͔͢Δ return {...data, additional: '௥Ճͷ஋' }; }); });
  3. // Ճ͑ͯΤϥʔʹରͯ͠Կ͔͢Δྫ 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 } ); }); });
  4. // 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()); }); });