4faf579c4f
We replace neo4j-graphql-js with @neo4j/graphql and update Apollo server to version 4. This refactor also changes the code from Javascript to Typescript. ## Bug - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Errors have a helpful link attached, see [`contributing.md`](https://github.com/vercel/next.js/blob/canary/contributing.md) ## Feature - [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR. - [ ] Related issues linked using `fixes #number` - [ ] [e2e](https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs) tests added - [ ] Documentation added - [ ] Telemetry added. In case of a feature if it's used or not. - [ ] Errors have a helpful link attached, see [`contributing.md`](https://github.com/vercel/next.js/blob/canary/contributing.md) ## Documentation / Examples - [x] Make sure the linting passes by running `pnpm build && pnpm lint` - [x] The "examples guidelines" are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)
159 lines
4 KiB
TypeScript
159 lines
4 KiB
TypeScript
import Head from 'next/head'
|
|
import Link from 'next/link'
|
|
import { gql, useQuery } from '@apollo/client'
|
|
import Header from '../components/header'
|
|
import Footer from '../components/footer'
|
|
import type { Movies } from '../types'
|
|
|
|
const GET_MOVIES = gql`
|
|
query GetMovies {
|
|
movies {
|
|
title
|
|
tagline
|
|
released
|
|
actors {
|
|
name
|
|
}
|
|
directors {
|
|
name
|
|
}
|
|
}
|
|
}
|
|
`
|
|
|
|
export default function Home() {
|
|
const { loading, error, data } = useQuery<{ movies: Movies }>(GET_MOVIES)
|
|
|
|
if (loading) return 'Loading...'
|
|
if (error) return `Error! ${error.message}`
|
|
|
|
return (
|
|
<div className="container">
|
|
<Head>
|
|
<title>Next with Neo4j</title>
|
|
<link rel="icon" href="/favicon.ico" />
|
|
</Head>
|
|
|
|
<Header />
|
|
<main>
|
|
<div className="movies">
|
|
<div className="subtitle">
|
|
<p>
|
|
<strong>"Movies"</strong> Neo4j example dataset.
|
|
</p>
|
|
</div>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>#</th>
|
|
<th>Movie Title</th>
|
|
<th>Released</th>
|
|
<th>Tagline</th>
|
|
<th>Directed</th>
|
|
<th>Actors</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{data.movies.map((movie, index) => (
|
|
<tr className="movie" key={movie.title}>
|
|
<th>{index + 1}</th>
|
|
<td>
|
|
<Link
|
|
href="/movie/[title]"
|
|
as={{
|
|
pathname: `/movie/${encodeURIComponent(movie.title)}`,
|
|
}}
|
|
legacyBehavior
|
|
>
|
|
<a className="link">{movie.title}</a>
|
|
</Link>
|
|
</td>
|
|
<td>{movie.released}</td>
|
|
<td>{movie.tagline}</td>
|
|
<td>
|
|
<ul>
|
|
{movie.directors.map((director) => (
|
|
<li key={director.name}>{director.name}</li>
|
|
))}
|
|
</ul>
|
|
</td>
|
|
<td>
|
|
<ul>
|
|
{movie.actors.map((actor) => (
|
|
<li key={actor.name}>
|
|
<Link
|
|
href="/actor/[name]"
|
|
as={{
|
|
pathname: `/actor/${encodeURIComponent(
|
|
actor.name
|
|
)}`,
|
|
}}
|
|
legacyBehavior
|
|
>
|
|
<a className="link">{actor.name}</a>
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</main>
|
|
|
|
<Footer />
|
|
|
|
<style jsx>{`
|
|
.container {
|
|
width: 100vw;
|
|
min-height: 100vh;
|
|
padding: 0 0.5rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
main {
|
|
display: flex;
|
|
width: 100%;
|
|
}
|
|
.subtitle {
|
|
margin-bottom: 25px;
|
|
text-align: center;
|
|
}
|
|
.movies {
|
|
flex: 1;
|
|
padding: 0 5rem;
|
|
}
|
|
|
|
table {
|
|
width: 100%;
|
|
border: 1px solid #dee2e6;
|
|
border-collapse: collapse;
|
|
border-spacing: 2px;
|
|
}
|
|
|
|
table thead th {
|
|
vertical-align: middle;
|
|
border-bottom: 2px solid #dee2e6;
|
|
border: 1px solid #dee2e6;
|
|
border-bottom-width: 2px;
|
|
padding: 0.75rem;
|
|
}
|
|
|
|
table tbody th,
|
|
table tbody td {
|
|
border: 1px solid #dee2e6;
|
|
padding: 0.75rem;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.link {
|
|
text-decoration: underline;
|
|
}
|
|
`}</style>
|
|
</div>
|
|
)
|
|
}
|