Next.js + Apollo Client 적용하기

들어가기에 앞서

Apollo Client

Apollo Client의 캐싱

1. 데이터 요청
2. InMemotyCache에 저장된 Cache가 없다면 서버에 요청
3. 서버에서 데이터를 받아옴
4. InMemotyCache에 데이터를 저장
5. 데이터 반환

1. 데이터 요청
2. InMemotyCache에 저장된 Cache 반환

Next.js와 Apollo Client

1. getServerSideProps에서 Apollo Client를 사용하여 A Query 요청
2. 응답한 데이터를 Cache에 저장
3. Component에서 A Query 요청
4. InMemotyCache에 저장된 Cache 데이터 반환

Next.js, Apollo Client 설치

1$ npx create-next-app@latest --typescript
2$ npm i @apollo/client deepmerge lodash

apollo.ts

1import { useMemo } from 'react';
2import { AppProps } from 'next/app';
3
4import merge from 'deepmerge';
5import isEqual from 'lodash/isEqual';
6
7import { ApolloClient, HttpLink, InMemoryCache, NormalizedCacheObject } from '@apollo/client';
8
9let apolloClient: ApolloClient<NormalizedCacheObject>;
10export const APOLLO_STATE_PROP_NAME = '__APOLLO_STATE__';
11
12const createApolloClient = () => {
13    return new ApolloClient({
14        ssrMode: typeof window === 'undefined',
15        link: new HttpLink({
16            uri: 'http://localhost:3065/graphql',
17            credentials: 'include',
18        }),
19        cache: new InMemoryCache(),
20    });
21};
22
23export const initializeApollo = (initialState: NormalizedCacheObject | null = null) => {
24    const _apolloClient = apolloClient ?? createApolloClient();
25
26    if (initialState) {
27        const existingCache = _apolloClient.extract();
28
29        const data = merge(initialState, existingCache, {
30            arrayMerge: (destinationArray, sourceArray) => [
31                ...sourceArray,
32                ...destinationArray.filter((d) => sourceArray.every((s) => !isEqual(d, s))),
33            ],
34        });
35
36        _apolloClient.cache.restore(data);
37    }
38    if (typeof window === 'undefined') return _apolloClient;
39    if (!apolloClient) apolloClient = _apolloClient;
40
41    return _apolloClient;
42};
43
44export const useApollo = (pageProps: AppProps['pageProps']) => {
45    const initialState = pageProps?.[APOLLO_STATE_PROP_NAME];
46    const store = useMemo(() => initializeApollo(initialState), [initialState]);
47    return store;
48};
49
50export const addApolloState = (client: ApolloClient<NormalizedCacheObject>, pageProps: AppProps['pageProps']) => {
51    if (pageProps?.props) pageProps.props[APOLLO_STATE_PROP_NAME] = client.cache.extract();
52
53    return pageProps;
54};

createApolloClient

• typeof window === 'undefined'가 true이면 server 환경입니다.

• server와 통신을 위한 HttpLink를 선언합니다.
• uri: GraphQL 서버의 주소
• credentials: 'include'를 통해 쿠키를 포함한 요청을 보낼 수 있습니다.

• Apollo Client의 캐싱을 위해 InMemoryCache를 사용합니다.

initializeApollo

1const _apolloClient = apolloClient ?? createApolloClient();

1if (initialState) {
2    const existingCache = _apolloClient.extract();
3
4    const data = merge(initialState, existingCache, {
5        arrayMerge: (destinationArray, sourceArray) => [
6            ...sourceArray,
7            ...destinationArray.filter((d) => sourceArray.every((s) => !isEqual(d, s))),
8        ],
9    });
10
11    _apolloClient.cache.restore(data);
12}

useApollo

addApolloState

동작 코드 구현

_app.tsx

1import { AppProps } from 'next/app';
2import { ApolloProvider } from '@apollo/client';
3import { useApollo } from '../utils/apollo';
4
5const MyApp = ({ Component, pageProps }: AppProps) => {
6    const client = useApollo(pageProps);
7
8    return (
9        <ApolloProvider client={client}>
10            <Component {...pageProps} />
11        </ApolloProvider>
12    );
13};
14
15export default MyApp;

index.tsx

1...
2
3export const getServerSideProps: GetServerSideProps = async (ctx) => {
4    const apolloClient = initializeApollo();
5
6    await apolloClient.query({ query: GET_POSTS });
7
8    return addApolloState(apolloClient, { props: {} });
9};
10
11...

실행

index 페이지

1const Home = () => {
2    const { data, fetchMore } = useMyQuery<IGetPosts>(GET_POSTS);
3
4    return (
5        <div>
6            <Link href="/tt">테스트 페이지</Link>
7            <div>
8                {data.getPosts.posts.map((post, i) => (
9                    <div key={post._id} style={{ marginBottom: '20px', backgroundColor: '#ccc', maxWidth: '300px' }}>
10                        <div>번호: {i + 1}</div>
11                        <div>아이디: {post._id}</div>
12                        <div>제목: {post.title}</div>
13                        <div>카테고리: {post.category}</div>
14                    </div>
15                ))}
16            </div>
17        </div>
18    );
19};
20
21export const getServerSideProps: GetServerSideProps = async (ctx) => {
22    const apolloClient = initializeApollo();
23
24    await apolloClient.query({ query: GET_POSTS });
25
26    return addApolloState(apolloClient, { props: {} });
27};

test 페이지

1const Test = () => {
2    return (
3        <div>
4            <Link href="/">홈</Link>
5        </div>
6    );
7};
8
9export const getServerSideProps = async () => {
10    const apolloClient = initializeApollo();
11
12    const { data } = await apolloClient.query({
13        query: GET_POSTS,
14    });
15
16    return addApolloState(apolloClient, { props: { posts: data.getPosts.posts } });
17};

마치며