nextjs + apollo ssr 구현

HyosikPark·2020년 12월 29일
0

Nextjs + Graphql

목록 보기
1/1

게시판을 만드는 중에 게시물들을 csr후에 useQuery로 받아오는 과정은 UI가 매끄럽지 못하고, SEO 적용도 안될뿐더러 게시물들의 최신상태를 나타내줄 수 없기에 ssr로 처리하기로 하였다.

getStaticProps나 getServerSideProps로 적용하는 방법은 아직 어렵다.
하지만 getInitialProps는 next-with-apollo lib으로 사용하기 쉽기 때문에 이 방법을 선택하였다.

npm i @apollo/client next-with-apollo

// components/apollo-client.ts

import { ApolloClient, InMemoryCache } from '@apollo/client';
import { withApollo } from 'next-with-apollo';

export default withApollo(
  ({ initialState }) =>
    new ApolloClient({
      cache: new InMemoryCache().restore(initialState || {}),
      uri:
        process.env.NODE_ENV !== 'development'
          ? `${process.env.PRO_END_POINT}`
          : `${process.env.DEV_END_POINT}`,
    })
);

initialState는 Next서버에서 사용하던 cache가 초기화 되지 않도록 로딩될 때마다 restore메소드를 이용해 cache에 데이터를 다시 설정하는 과정이고 uri는 endpoint의 절대 경로이다.

// pages/_app.tsx

import { ApolloProvider } from '@apollo/client';
import withApollo from '../components/apollo-client';
import App from 'next/app';

function MyApp({ Component, pageProps, apollo }) {
  return (
    <ApolloProvider client={apollo}>
      <Component {...pageProps} />
    </ApolloProvider>
  );
}

MyApp.getInitialProps = async (appContext) => {
  const appProps = await App.getInitialProps(appContext);
  return { ...appProps };
};

export default withApollo(MyApp);

모든 pages의 getInitialProps에서 apollo client를 사용할 수있도록 설정.

Board.getInitialProps = async (ctx) => {
  const { curPage, id: star } = ctx.query;
  const result = await ctx.apolloClient.query({
    query: ALLPOSTS,
    variables: { category: `${star}`, curPage },
  });
  return { ...result.data.allPosts, curPage, star };
};

원하는 pages의 ctx.apolloClient에 접근하여 ssr 쿼리 가능.

2개의 댓글