mirror of
https://github.com/hanzoai/next.js.git
synced 2026-09-24 17:00:51 +00:00
StevenandGitHub
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
95 lines
2.0 KiB
JavaScript
95 lines
2.0 KiB
JavaScript
import useSWR from "swr";
|
|
import { generateAuthHeader, REALM_GRAPHQL_ENDPOINT } from "../lib/RealmClient";
|
|
|
|
const FIND_MOVIES = `
|
|
query FindMovies{
|
|
movies(query: { year: 2014, rated: "PG" } ) {
|
|
title
|
|
year
|
|
runtime
|
|
}
|
|
}
|
|
`;
|
|
|
|
const fetcher = async (query) =>
|
|
fetch(REALM_GRAPHQL_ENDPOINT, {
|
|
method: "POST",
|
|
headers: await generateAuthHeader(),
|
|
body: JSON.stringify({ query }),
|
|
}).then((res) => res.json());
|
|
|
|
const IndexPage = () => {
|
|
const { data } = useSWR(FIND_MOVIES, fetcher);
|
|
|
|
if (data && data.error) {
|
|
console.error(data.error);
|
|
return <p>An error occurred: ${data.error}</p>;
|
|
}
|
|
const movies = data ? data.data.movies : null;
|
|
|
|
return (
|
|
<>
|
|
<div className="App">
|
|
<h1>"PG" Rated Movies - 2014</h1>
|
|
|
|
{data ? (
|
|
!movies && <div className="status">No movies Found</div>
|
|
) : (
|
|
<div className="status"> Fetching data...</div>
|
|
)}
|
|
|
|
{movies && (
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>#</th>
|
|
<th>Title</th>
|
|
<th>Runtime</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{movies.map((movie, index) => {
|
|
return (
|
|
<tr key={index}>
|
|
<td>{index + 1}</td>
|
|
<td>{movie.title}</td>
|
|
<td>{movie.runtime}</td>
|
|
</tr>
|
|
);
|
|
})}
|
|
</tbody>
|
|
</table>
|
|
)}
|
|
</div>
|
|
|
|
<style jsx>{`
|
|
th,
|
|
td {
|
|
padding: 15px;
|
|
text-align: left;
|
|
}
|
|
tr:nth-child(even) {
|
|
background-color: #f2f2f2;
|
|
}
|
|
th {
|
|
background-color: #69bef0;
|
|
color: white;
|
|
}
|
|
table {
|
|
width: 100%;
|
|
}
|
|
h1 {
|
|
text-align: center;
|
|
font-family: sans-serif;
|
|
}
|
|
.status {
|
|
text-color: red;
|
|
text-align: center;
|
|
}
|
|
`}</style>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default IndexPage;
|