57 lines
1.4 KiB
TypeScript
57 lines
1.4 KiB
TypeScript
import { gql, useQuery } from "@apollo/client";
|
|
import {
|
|
Paper,
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableContainer,
|
|
TableHead,
|
|
TableRow,
|
|
} from "@material-ui/core";
|
|
import React, { FC } from "react";
|
|
import { Article } from '../generated/graphql';
|
|
|
|
const articles = gql`
|
|
query Articles {
|
|
articles {
|
|
id
|
|
title
|
|
publishedAt
|
|
}
|
|
}`;
|
|
|
|
export const ArticleIndex: FC = () => {
|
|
const { data } = useQuery<{
|
|
articles: Article[];
|
|
}>(articles, {});
|
|
|
|
return (
|
|
<section>
|
|
<TableContainer component={Paper}>
|
|
<Table aria-label="articles table">
|
|
<TableHead>
|
|
<TableRow>
|
|
<TableCell>Article Title</TableCell>
|
|
<TableCell>Published At</TableCell>
|
|
<TableCell>Views</TableCell>
|
|
<TableCell>Comments</TableCell>
|
|
</TableRow>
|
|
</TableHead>
|
|
<TableBody>
|
|
{data?.articles.map((article) => (
|
|
<TableRow key={article.id}>
|
|
<TableCell component="th" scope="row">
|
|
{article.title}
|
|
</TableCell>
|
|
<TableCell align="right">{article.publishedAt}</TableCell>
|
|
<TableCell align="right"> -- </TableCell>
|
|
<TableCell align="right"> -- </TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</TableContainer>
|
|
</section>
|
|
);
|
|
};
|