backup

src/articles/index.tsx

@@ -0,0 +1,56 @@
+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>
+  );
+};