nextjs+getServerSideProps+graphQLの使用

4876 ワード
テキストリンク
nextjsでは、getServerSidePropsを使用してサーバ側でレンダリングされたデータを取得できます.
以下は、プロジェクトで作成されたコードです.
問題の一意の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を使用しているため、必要なすべてのデータを1回のリクエストで取得できます.上記のviewOneQuestionByIdであれば、クエリを1つ増やしながら、質問の作成者、回答付きリストなどをインポートできます.
mutation {
      viewOneQuestionById(id: ${id}){
        질문 관련 데이터
        author {
          작성자 관련 데이터
        }
        answers{
          답변 관련 데이터
          author{
           답변 작성자 관련 데이터
         }
        }
      }
GraphQLで処理されたデータは、作成されたページまたは構成部品に転送されます.

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

...


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