https://github.com/af/apollo-local-query์ ๋ํ ์ง์๋ ์ถ๊ฐํ ์ ์์ต๋๊น?
์ด๊ฒ์ GraphQL ์๋ฒ๊ฐ ๋์ผํ ์๋ฒ ํ๋ก์ธ์ค์์ ์คํ ์ค์ผ ๋ React/Apollo ์ฑ์ ์๋ฒ ๋ ๋๋งํ๋ ๋ฐ ์ ์ฉํฉ๋๋ค. ๋คํธ์ํน ์คํ(์: localhost์ ์ฐ๊ฒฐ)์ ์๋ค ๊ฐ๋ค ํ๋ ๋์ ์ด ๋ชจ๋์ ์ฌ์ฉํ๋ฉด ์ฟผ๋ฆฌ๊ฐ ๋ ๋๋ง ์ฝ๋์ ๋์ผํ ํ๋ก์ธ์ค์์ ์คํ๋ฉ๋๋ค.
์ฌ๊ธฐ ๋ด ์์ ๋ฒ์ ์ด ์์ต๋๋ค. ๋๋ ๊ทธ๊ฒ์ด ๋น์ ์ ๋์ธ ์ ์๊ธฐ๋ฅผ ๋ฐ๋๋๋ค
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 ๊ฐ์ฌํฉ๋๋ค!
๊ฐ์ฅ ์ ์ฉํ ๋๊ธ
์๋ ํ์ธ์, ์ฌ๊ธฐ
apollo-local-query
์์ฑ์๋ ๊ฐ๋ฅํ๋ฉด Apollo Client์ ๋ก์ปฌ ๋งํฌ๋ฅผ ํฌํจํ๋ ์์ด๋์ด๋ฅผ +1ํ๊ณ ์ถ์์ต๋๋ค. ์ ์ ์์ ์ฝ๋์ด๋ฏ๋ก ์ ์ง ๊ด๋ฆฌ ๋ถ๋ด์ด ์ต์ํ๋์ด์ผ ํ๋ฉฐ Apollo Client ์ฌ์ฉ์๋ก์ SSR์ ์ฆ์ ์ฌ์ฉํ ์ ์๋๋ก ์์ ํ ์ค๋น๋์ด ์์ผ๋ฉด ์ ๋ง ์ข์ ๊ฒ์ ๋๋ค.