pages/server-side.js

/** @format */
import { gql } from '@apollo/client';
import Head from 'next/head';
import Image from 'next/image';
import styles from '../styles/Home.module.css';
import client from '../apollo-client';

export async function getServerSideProps() {
  const { data } = await client.query({
    query: gql`
      query GetArticles {
        articles {
          articleId
          title
          content
          author {
            username
          }
          comments {
            commentId
            message
            member {
              username
            }
            childrenComments {
              commentId
              message
              member {
                username
              }
            }
          }
        }
      }
    `,
  });

  return {
    props: {
      articles: data.articles.slice(0, 2),
    },
  };
}

export default function Home({ articles }) {
  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <meta name='description' content='Generated by create next app' />
        <link rel='icon' href='/favicon.ico' />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>
          Welcome to <a href='https://nextjs.org'>Next.js!</a>
        </h1>
        <div className='styles.grid'>
          {articles.map((article) => (
            <div key={article.articleId}>
              <h3>{article.title}</h3>
            </div>
          ))}
        </div>
      </main>

      <footer className={styles.footer}>
        <a
          href='https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app'
          target='_blank'
          rel='noopener noreferrer'
        >
          Powered by{' '}
          <span className={styles.logo}>
            <Image src='/vercel.svg' alt='Vercel Logo' width={72} height={16} />
          </span>
        </a>
      </footer>
    </div>
  );
}