Apollo-link: apollo-link-local-query ์ถ”๊ฐ€

์— ๋งŒ๋“  2017๋…„ 10์›” 17์ผ  ยท  10์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: apollographql/apollo-link

https://github.com/af/apollo-local-query์— ๋Œ€ํ•œ ์ง€์›๋„ ์ถ”๊ฐ€ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ?

์ด๊ฒƒ์€ GraphQL ์„œ๋ฒ„๊ฐ€ ๋™์ผํ•œ ์„œ๋ฒ„ ํ”„๋กœ์„ธ์Šค์—์„œ ์‹คํ–‰ ์ค‘์ผ ๋•Œ React/Apollo ์•ฑ์„ ์„œ๋ฒ„ ๋ Œ๋”๋งํ•˜๋Š” ๋ฐ ์œ ์šฉํ•ฉ๋‹ˆ๋‹ค. ๋„คํŠธ์›Œํ‚น ์Šคํƒ(์˜ˆ: localhost์— ์—ฐ๊ฒฐ)์„ ์™”๋‹ค ๊ฐ”๋‹ค ํ•˜๋Š” ๋Œ€์‹  ์ด ๋ชจ๋“ˆ์„ ์‚ฌ์šฉํ•˜๋ฉด ์ฟผ๋ฆฌ๊ฐ€ ๋ Œ๋”๋ง ์ฝ”๋“œ์™€ ๋™์ผํ•œ ํ”„๋กœ์„ธ์Šค์—์„œ ์‹คํ–‰๋ฉ๋‹ˆ๋‹ค.

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

์•ˆ๋…•ํ•˜์„ธ์š”, ์—ฌ๊ธฐ apollo-local-query ์ž‘์„ฑ์ž๋Š” ๊ฐ€๋Šฅํ•˜๋ฉด Apollo Client์— ๋กœ์ปฌ ๋งํฌ๋ฅผ ํฌํ•จํ•˜๋Š” ์•„์ด๋””์–ด๋ฅผ +1ํ•˜๊ณ  ์‹ถ์—ˆ์Šต๋‹ˆ๋‹ค. ์ ์€ ์–‘์˜ ์ฝ”๋“œ์ด๋ฏ€๋กœ ์œ ์ง€ ๊ด€๋ฆฌ ๋ถ€๋‹ด์ด ์ตœ์†Œํ™”๋˜์–ด์•ผ ํ•˜๋ฉฐ Apollo Client ์‚ฌ์šฉ์ž๋กœ์„œ SSR์„ ์ฆ‰์‹œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋„๋ก ์™„์ „ํžˆ ์ค€๋น„๋˜์–ด ์žˆ์œผ๋ฉด ์ •๋ง ์ข‹์„ ๊ฒƒ์ž…๋‹ˆ๋‹ค.

๋ชจ๋“  10 ๋Œ“๊ธ€

์—ฌ๊ธฐ ๋‚ด ์ž‘์—… ๋ฒ„์ „์ด ์žˆ์Šต๋‹ˆ๋‹ค. ๋‚˜๋Š” ๊ทธ๊ฒƒ์ด ๋‹น์‹ ์„ ๋„์šธ ์ˆ˜ ์žˆ๊ธฐ๋ฅผ ๋ฐ”๋ž๋‹ˆ๋‹ค

import ApolloClient from 'apollo-client';
import { ApolloLink, Observable } from 'apollo-link';
import { InMemoryCache } from 'apollo-cache-inmemory';

class LocalLink extends ApolloLink {
  constructor(schema, context, rootValue) {
    super();

    this.schema = schema;
    this.context = context;
    this.rootValue = rootValue;
  }

  request(operation) {
    const { schema, rootValue, context } = this;
    const { query, variables, operationName } = operation;

    return new Observable(observer => {
      let canceled = false;

      execute(schema, query, rootValue, context, variables, operationName)
        .then(result => {
          if (canceled) {
            return;
          }
          // we have data and can send it to back up the link chain
          observer.next(result);
          observer.complete();
          return result;
        })
        .catch(err => {
          if (canceled) {
            return;
          }

          observer.error(err);
        });

        return () => {
          canceled = true;
        };
    });
  }
}


const cache = new InMemoryCache();
const link = new LocalLink(schema, graphQLContext);
const apolloClient = new ApolloClient({
   ssrMode: true,
   cache,
   link,
});

์•ˆ๋…•ํ•˜์„ธ์š” @seeden์ž…๋‹ˆ๋‹ค! ์ด ๋งํฌ๋ฅผ ๋งŒ๋“ค์–ด ์ฃผ์…”์„œ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค. :์›ƒ์Œ์ด ๋„˜์น˜๋Š”:

์ด ๋งํฌ์— ๋Œ€ํ•œ ๋ฆฌํฌ์ง€ํ† ๋ฆฌ๋ฅผ ์ƒ์„ฑ(๋˜๋Š” ๊ธฐ์กด ๋งํฌ์— ์ถ”๊ฐ€)ํ•˜๊ณ  npm ํŒจํ‚ค์ง€(์•„๋งˆ๋„ apollo-link-local-query)๋กœ ๊ฒŒ์‹œํ•ด ์ฃผ์‹œ๊ฒ ์Šต๋‹ˆ๊นŒ? apollo-link ์ €์žฅ์†Œ์—๋Š” ์œ ์ง€ ๊ด€๋ฆฌ์— ๋„์›€์ด ๋˜๋Š” ๋งํฌ๋งŒ ํฌํ•จ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค.

์šฐ๋ฆฌ๋Š” ์—ฌ์ „ํžˆ ์ปค๋ฎค๋‹ˆํ‹ฐ ๋งํฌ๋ฅผ ์ œ๊ณตํ•˜๋Š” ๊ฐ€์žฅ ์ข‹์€ ๋ฐฉ๋ฒ•์„ ์ฐพ๊ณ  ์žˆ์ง€๋งŒ ์ผ๋‹จ ๊ทธ๋ ‡๊ฒŒ ํ•˜๋ฉด apollo-link-local-query ์ปค๋ฎค๋‹ˆํ‹ฐ ๋งํฌ๋กœ ์ถ”๊ฐ€๋˜๋Š” ๊ฒƒ์„ ๋ณด๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค!

์•ˆ๋…• ํŽ˜๊ธฐ. ๋ฌธ์ œ ์—†์Šต๋‹ˆ๋‹ค. ์ƒˆ npm ํŒจํ‚ค์ง€๋ฅผ ๋งŒ๋“  ๋‹ค์Œ ์ด ๋ฌธ์ œ๋ฅผ ๋‹ซ์„ ๊ฒƒ์ž…๋‹ˆ๋‹ค.

SSR์— ๊ฑฐ์˜ ํ•„์š”ํ•˜๊ณ  ๊ณต์‹ ๋ฌธ์„œ์—๋„ ์–ธ๊ธ‰๋˜์–ด ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ์ด๊ฒƒ์ด ๊ณต์‹์ ์œผ๋กœ ์ง€์›๋œ๋‹ค๋ฉด ์ข‹์„ ๊ฒƒ์ž…๋‹ˆ๋‹ค(์†”๋ฃจ์…˜์— ๋Œ€ํ•œ ๋งํฌ๋Š” ์—†์ง€๋งŒ): https://www.apollographql.com/docs/react/recipes/server -side

๋‚ด ํ”„๋กœ์ ํŠธ์—์„œ ์ด ์ž‘์—…์„ ์ˆ˜ํ–‰ํ•  ์ˆ˜ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค(@seeden์—๊ฒŒ ๊ฐ์‚ฌ๋“œ๋ฆฝ๋‹ˆ๋‹ค).

https://github.com/nick/boulder-vote/blob/master/src/ApolloLinkLocal.js
https://github.com/nick/boulder-vote/blob/master/index.js#L67 -L71

npm ๋ชจ๋“ˆ์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋˜๋ฉด ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.

์•ˆ๋…•ํ•˜์„ธ์š”, ์—ฌ๊ธฐ apollo-local-query ์ž‘์„ฑ์ž๋Š” ๊ฐ€๋Šฅํ•˜๋ฉด Apollo Client์— ๋กœ์ปฌ ๋งํฌ๋ฅผ ํฌํ•จํ•˜๋Š” ์•„์ด๋””์–ด๋ฅผ +1ํ•˜๊ณ  ์‹ถ์—ˆ์Šต๋‹ˆ๋‹ค. ์ ์€ ์–‘์˜ ์ฝ”๋“œ์ด๋ฏ€๋กœ ์œ ์ง€ ๊ด€๋ฆฌ ๋ถ€๋‹ด์ด ์ตœ์†Œํ™”๋˜์–ด์•ผ ํ•˜๋ฉฐ Apollo Client ์‚ฌ์šฉ์ž๋กœ์„œ SSR์„ ์ฆ‰์‹œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋„๋ก ์™„์ „ํžˆ ์ค€๋น„๋˜์–ด ์žˆ์œผ๋ฉด ์ •๋ง ์ข‹์„ ๊ฒƒ์ž…๋‹ˆ๋‹ค.

์•ˆ๋…•ํ•˜์„ธ์š”, ์ €๋„ npm ๋ชจ๋“ˆ์„ ๊ธฐ๋‹ค๋ฆฌ๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์ง€๊ธˆ์€ ๋กœ์ปฌ๋กœ ๋ณต์‚ฌํ•ฉ๋‹ˆ๋‹ค. ๊ตฌ์ถ•ํ•ด์ฃผ์…”์„œ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค.

๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค!

@jbaxleyiii ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค!

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰