46 lines
1.2 KiB
TypeScript
46 lines
1.2 KiB
TypeScript
import { useQuery } from "@apollo/client";
|
|
import { GetServerSideProps } from 'next';
|
|
import Link from "next/link";
|
|
import React from "react";
|
|
import { addApolloState, initializeApollo } from '../commons/graphql/client';
|
|
import { Article } from "../commons/graphql/generated";
|
|
import { ARTICLE_FOR_HOME } from "../commons/graphql/queries";
|
|
import styles from "./index.module.css";
|
|
|
|
export default function Index() {
|
|
const { data, loading } = useQuery<{ articles: Article[] }>(ARTICLE_FOR_HOME);
|
|
|
|
return (
|
|
<main className={styles.index}>
|
|
<ol>
|
|
{data?.articles?.map((article) => (
|
|
<Item article={article} key={article.id} />
|
|
))}
|
|
</ol>
|
|
</main>
|
|
);
|
|
}
|
|
|
|
function Item({ article }: { article: Article }) {
|
|
return (
|
|
<Link href={`/articles/${article.id}`}>
|
|
<li className={styles.item}>
|
|
<h2 className={styles.title}>{article.title}</h2>
|
|
<p className={styles.description}>{article.content}</p>
|
|
</li>
|
|
</Link>
|
|
);
|
|
}
|
|
|
|
|
|
export const getServerSideProps: GetServerSideProps = async ({ params }) => {
|
|
const apolloClient = initializeApollo();
|
|
|
|
await apolloClient.query({
|
|
query: ARTICLE_FOR_HOME,
|
|
});
|
|
|
|
return addApolloState(apolloClient, {
|
|
props: {},
|
|
});
|
|
}; |