nextjs + getServerSideProps + graphQL 사용기

nextjs에서는 getServerSideProps를 이용하여 서버사이드 렌더링을 위한 데이터 fetch를 할 수 있습니다.

다음은 프로젝트에서 작성한 코드입니다.
질문의 고유Id값을 이용하여 해당 질문 데이터를 가져오는 쿼리를 진행합니다.

export const getServerSideProps: GetServerSideProps = async (context) => {
  const { id } = context.params;
  try {
    const viewedQuestion = await viewOneQuestionByID(Number(id));
    const question = viewedQuestion.data.viewOneQuestionById;

    return {
      props: {
        question,
      },
    };
  } catch {
    return {
      notFound: true,
    };
  }
};

graphQL을 사용했기 때문에 한번의 요청으로 원하는 모든 데이터를 가져올 수 있습니다. 위의 viewOneQuestionById인 경우 조회수를 하나 증가시킴과 동시에 해당 질문의 작성자, 달린 답변리스트등을 모두 가져올 수 있습니다.

mutation {
      viewOneQuestionById(id: ${id}){
        질문 관련 데이터
        author {
          작성자 관련 데이터
        }
        answers{
          답변 관련 데이터
          author{
           답변 작성자 관련 데이터
         }
        }
      }

이렇게 graphQL을 이용하여 처리된 데이터는 작성된 페이지 또는 컴포넌트에 전달되게 됩니다.

// getServerSideProps
return {
      props: {
        question,
      },
    };

...


// getServerSideProps에서 return된 데이터는 QuestionPage 데이터로 전달됩니다.
const QuestionPage: NextPage<Props> = ({ question }) => {