4466ba436b
## Description This PR ensures that the default prettier config is used for examples and templates. This config is compatible with `prettier@3` as well (upgrading prettier is bigger change that can be a future PR). ## Changes - Updated `.prettierrc.json` in root with `"trailingComma": "es5"` (will be needed upgrading to prettier@3) - Added `examples/.prettierrc.json` with default config (this will change every example) - Added `packages/create-next-app/templates/.prettierrc.json` with default config (this will change every template) ## Related - Fixes #54402 - Closes #54409
111 lines
2.6 KiB
JavaScript
111 lines
2.6 KiB
JavaScript
import { gql, useQuery, NetworkStatus } from "@apollo/client";
|
|
import ErrorMessage from "./ErrorMessage";
|
|
import PostUpvoter from "./PostUpvoter";
|
|
|
|
export const ALL_POSTS_QUERY = gql`
|
|
query allPosts($first: Int!, $skip: Int!) {
|
|
allPosts(orderBy: { createdAt: desc }, first: $first, skip: $skip) {
|
|
id
|
|
title
|
|
votes
|
|
url
|
|
createdAt
|
|
}
|
|
_allPostsMeta {
|
|
count
|
|
}
|
|
}
|
|
`;
|
|
export const allPostsQueryVars = {
|
|
skip: 0,
|
|
first: 10,
|
|
};
|
|
|
|
export default function PostList() {
|
|
const { loading, error, data, fetchMore, networkStatus } = useQuery(
|
|
ALL_POSTS_QUERY,
|
|
{
|
|
variables: allPostsQueryVars,
|
|
// Setting this value to true will make the component rerender when
|
|
// the "networkStatus" changes, so we are able to know if it is fetching
|
|
// more data
|
|
notifyOnNetworkStatusChange: true,
|
|
},
|
|
);
|
|
|
|
const loadingMorePosts = networkStatus === NetworkStatus.fetchMore;
|
|
|
|
const { allPosts, _allPostsMeta } = data;
|
|
|
|
const loadMorePosts = () => {
|
|
fetchMore({
|
|
variables: {
|
|
skip: allPosts.length,
|
|
},
|
|
});
|
|
};
|
|
|
|
if (error) return <ErrorMessage message="Error loading posts." />;
|
|
if (loading && !loadingMorePosts) return <div>Loading</div>;
|
|
|
|
const areMorePosts = allPosts.length < _allPostsMeta.count;
|
|
|
|
return (
|
|
<section>
|
|
<ul>
|
|
{allPosts.map((post, index) => (
|
|
<li key={post.id}>
|
|
<div>
|
|
<span>{index + 1}. </span>
|
|
<a href={post.url}>{post.title}</a>
|
|
<PostUpvoter id={post.id} votes={post.votes} />
|
|
</div>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
{areMorePosts && (
|
|
<button onClick={() => loadMorePosts()} disabled={loadingMorePosts}>
|
|
{loadingMorePosts ? "Loading..." : "Show More"}
|
|
</button>
|
|
)}
|
|
<style jsx>{`
|
|
section {
|
|
padding-bottom: 20px;
|
|
}
|
|
li {
|
|
display: block;
|
|
margin-bottom: 10px;
|
|
}
|
|
div {
|
|
align-items: center;
|
|
display: flex;
|
|
}
|
|
a {
|
|
font-size: 14px;
|
|
margin-right: 10px;
|
|
text-decoration: none;
|
|
padding-bottom: 0;
|
|
border: 0;
|
|
}
|
|
span {
|
|
font-size: 14px;
|
|
margin-right: 5px;
|
|
}
|
|
ul {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
button:before {
|
|
align-self: center;
|
|
border-style: solid;
|
|
border-width: 6px 4px 0 4px;
|
|
border-color: #ffffff transparent transparent transparent;
|
|
content: "";
|
|
height: 0;
|
|
margin-right: 5px;
|
|
width: 0;
|
|
}
|
|
`}</style>
|
|
</section>
|
|
);
|
|
}
|