blog-fs/pages/index.tsx
2021-05-02 10:42:38 +08:00

23 lines
700 B
TypeScript

import { useQuery } from '@apollo/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 <li className={styles.item}>
<h2 className={styles.title}>{article.title}</h2>
<p className={styles.description}>{article.content}</p>
</li>
}