Mirror: The highly customizable and versatile GraphQL client with which you add on features like normalized caching as you grow.
(examples) - next.js (#1502)
* add next example
* Update examples/with-next/README.md
Co-authored-by: Jess Telford <jess+github@jes.st>
* Update static.js
* convert to trygql.dev
* remove unused dep
* use gql helper
* Remove lockfile
Co-authored-by: Jess Telford <jess+github@jes.st>
authored by
Jovi De Croock
Jess Telford
and committed by
GitHub
c5e1422f
25e6c5bd
+223
+48
examples/with-next/README.md
+48
examples/with-next/README.md
···
1
+
# Integrating with Next
2
+
3
+
## getInitialProps
4
+
5
+
This is the output you'll get when you're using `{ ssr: true }`, this way urql will try to automate
6
+
as much for you as it possibly can by using a [`prepass`](https://github.com/FormidableLabs/react-ssr-prepass)
7
+
this means that every `useQuery` used in your virtual-dom will be ran, the data will be collected on the server
8
+
and hydrated on the client.
9
+
10
+
> NOTE: to reduce performance complexities try to keep this to top-level renders as this can amount to waterfalls.
11
+
12
+
## getStaticProps
13
+
14
+
This requires some manual work, when we look at [`static.js`](./pages/static.js) we can see that we define our own
15
+
`getStaticProps` method, this because these methods are only `user-facing`. When doing a `yarn next build` we'll need to
16
+
ensure that the server we're targetting is running so we can successfully execute the static prerender.
17
+
18
+
## getServerSideProps
19
+
20
+
This requires some manual work, when we look at [`server.js`](./pages/server.js) we can see that we define our own
21
+
`getServerSideProps` method, this because these methods are only `user-facing`.
22
+
23
+
## Output
24
+
25
+
We can see that our `/` and `/server` routes are rendered on the server and `/static` is statically prerendered.
26
+
27
+
```
28
+
Page Size First Load JS
29
+
┌ λ / 4.98 kB 90 kB
30
+
├ /_app 0 B 85 kB
31
+
├ ○ /404 3.46 kB 88.5 kB
32
+
├ λ /api/graphql 0 B 85 kB
33
+
├ λ /server 878 B 85.9 kB
34
+
└ ● /static 895 B 85.9 kB
35
+
+ First Load JS shared by all 85 kB
36
+
├ chunks/d8c192fcf6e34535672c13f111ef41e3832b265d.d03071.js 17.4 kB
37
+
├ chunks/f6078781a05fe1bcb0902d23dbbb2662c8d200b3.6a2b27.js 13.3 kB
38
+
├ chunks/framework.4b1bec.js 41.8 kB
39
+
├ chunks/main.3d1d43.js 7.14 kB
40
+
├ chunks/pages/_app.92bde8.js 4.68 kB
41
+
└ chunks/webpack.50bee0.js 751 B
42
+
43
+
44
+
λ (Server) server-side renders at runtime (uses getInitialProps or getServerSideProps)
45
+
○ (Static) automatically rendered as static HTML (uses no initial props)
46
+
● (SSG) automatically generated as static HTML + JSON (uses getStaticProps)
47
+
(ISR) incremental static regeneration (uses revalidate in getStaticProps)
48
+
```
+17
examples/with-next/package.json
+17
examples/with-next/package.json
···
1
+
{
2
+
"name": "next-get-static-props",
3
+
"version": "1.0.0",
4
+
"private": true,
5
+
"dependencies": {
6
+
"graphql": "^15.5.0",
7
+
"next": "10.1.2",
8
+
"next-urql": "^3.0.1",
9
+
"react": "^17.0.2",
10
+
"react-dom": "^17.0.2",
11
+
"urql": "^2.0.2"
12
+
},
13
+
"scripts": {
14
+
"start": "next",
15
+
"build": "next build"
16
+
}
17
+
}
+10
examples/with-next/pages/_app.js
+10
examples/with-next/pages/_app.js
+40
examples/with-next/pages/index.js
+40
examples/with-next/pages/index.js
···
1
+
import { initUrqlClient, withUrqlClient } from "next-urql";
2
+
import {
3
+
ssrExchange,
4
+
dedupExchange,
5
+
cacheExchange,
6
+
fetchExchange,
7
+
useQuery,
8
+
gql
9
+
} from "urql";
10
+
11
+
const POKEMONS_QUERY = gql`
12
+
query {
13
+
pokemons(limit: 10) {
14
+
id
15
+
name
16
+
}
17
+
}
18
+
`;
19
+
20
+
function Index() {
21
+
const [res] = useQuery({ query: POKEMONS_QUERY });
22
+
23
+
return (
24
+
<div>
25
+
<h1>Static</h1>
26
+
{res.data.pokemons.map((pokemon) => (
27
+
<div key={pokemon.id}>
28
+
{pokemon.id} - {pokemon.name}
29
+
</div>
30
+
))}
31
+
</div>
32
+
);
33
+
}
34
+
35
+
export default withUrqlClient(
36
+
() => ({
37
+
url: "https://trygql.dev/graphql/basic-pokedex"
38
+
}),
39
+
{ ssr: true }
40
+
)(Index);
+54
examples/with-next/pages/server.js
+54
examples/with-next/pages/server.js
···
1
+
import { initUrqlClient } from "next-urql";
2
+
import {
3
+
ssrExchange,
4
+
dedupExchange,
5
+
cacheExchange,
6
+
fetchExchange,
7
+
useQuery
8
+
gql
9
+
} from "urql";
10
+
11
+
const POKEMONS_QUERY = gql`
12
+
query {
13
+
pokemons(limit: 10) {
14
+
id
15
+
name
16
+
}
17
+
}
18
+
`;
19
+
20
+
function Server() {
21
+
const [res] = useQuery({ query: POKEMONS_QUERY });
22
+
23
+
return (
24
+
<div>
25
+
<h1>Server-side render</h1>
26
+
{res.data.pokemons.map((pokemon) => (
27
+
<div key={pokemon.id}>
28
+
{pokemon.id} - {pokemon.name}
29
+
</div>
30
+
))}
31
+
</div>
32
+
);
33
+
}
34
+
35
+
export async function getServerSideProps() {
36
+
const ssrCache = ssrExchange({ isClient: false });
37
+
const client = initUrqlClient({
38
+
url: "https://trygql.dev/graphql/basic-pokedex",
39
+
exchanges: [dedupExchange, cacheExchange, ssrCache, fetchExchange]
40
+
}, false);
41
+
42
+
// This query is used to populate the cache for the query
43
+
// used on this page.
44
+
await client.query(POKEMONS_QUERY).toPromise();
45
+
46
+
return {
47
+
props: {
48
+
// urqlState is a keyword here so withUrqlClient can pick it up.
49
+
urqlState: ssrCache.extractData()
50
+
},
51
+
};
52
+
}
53
+
54
+
export default Server;
+54
examples/with-next/pages/static.js
+54
examples/with-next/pages/static.js
···
1
+
import { initUrqlClient } from "next-urql";
2
+
import {
3
+
ssrExchange,
4
+
dedupExchange,
5
+
cacheExchange,
6
+
fetchExchange,
7
+
useQuery,
8
+
gql
9
+
} from "urql";
10
+
11
+
const POKEMONS_QUERY = gql`
12
+
query {
13
+
pokemons(limit: 10) {
14
+
id
15
+
name
16
+
}
17
+
}
18
+
`;
19
+
20
+
function Static() {
21
+
const [res] = useQuery({ query: POKEMONS_QUERY });
22
+
23
+
return (
24
+
<div>
25
+
<h1>Static</h1>
26
+
{res.data.pokemons.map((pokemon) => (
27
+
<div key={pokemon.id}>
28
+
{pokemon.id} - {pokemon.name}
29
+
</div>
30
+
))}
31
+
</div>
32
+
);
33
+
}
34
+
35
+
export async function getStaticProps() {
36
+
const ssrCache = ssrExchange({ isClient: false });
37
+
const client = initUrqlClient({
38
+
url: "https://trygql.dev/graphql/basic-pokedex",
39
+
exchanges: [dedupExchange, cacheExchange, ssrCache, fetchExchange]
40
+
}, false);
41
+
42
+
// This query is used to populate the cache for the query
43
+
// used on this page.
44
+
await client.query(POKEMONS_QUERY).toPromise();
45
+
46
+
return {
47
+
props: {
48
+
// urqlState is a keyword here so withUrqlClient can pick it up.
49
+
urqlState: ssrCache.extractData()
50
+
},
51
+
};
52
+
}
53
+
54
+
export default Static;