-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.jsx
62 lines (56 loc) · 1.66 KB
/
index.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
import Link from 'next/link'
import { graphql, fetchQuery } from 'react-relay'
import { initializeRelay, finalizeRelay } from '../lib/relay'
import { SWStarship } from '../components/SWStarship'
export async function getStaticProps() {
const environment = initializeRelay()
const result = await fetchQuery(
environment,
graphql`
query pagesIndexQuery {
allStarships(first: 5) {
edges {
# This 'node' will be passed to the <SWStarship> component as the
# 'starship' prop
node {
id
# Must match the named fragment from the <SWStarship> component.
...SWStarship_starship
}
}
}
}
`
).toPromise()
// Helper function to hydrate the Relay cache client side on page load
return finalizeRelay(environment, {
props: {
// Return the results directly so the component can render immediately
allStarships: result.allStarships,
},
revalidate: 1,
})
}
const Index = ({ allStarships }) => (
<div>
<strong>Home</strong>
|
<Link href="/films">
<a>Films</a>
</Link>
|
<Link href="/paginated">
<a>Paginated</a>
</Link>
<h1>StarWars Starships</h1>
<ul>
{allStarships.edges.map(({ node: starship }) => (
// The `starship` prop gets read by Relay within the SWStarship
// component to hydrate the data required by the fragment in that
// component
<SWStarship key={starship.id} starship={starship} />
))}
</ul>
</div>
)
export default Index