Skip to content

Commit 8585a17

Browse files
todortotevtodortotev
authored
docs(nextjs-example) init (#1146)
1 parent 0d97ece commit 8585a17

File tree

16 files changed

+5284
-0
lines changed

16 files changed

+5284
-0
lines changed

‎docs/src/pages/docs/examples.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,3 +15,4 @@ title: Examples
1515
- Playground (with devtools) - [CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-query/tree/master/examples/playground) - [Source](./examples/playground)
1616
- Star Wars (with devtools) - [CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-query/tree/master/examples/star-wars) - [Source](./examples/star-wars)
1717
- Rick And Morty (with devtools) - [CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-query/tree/master/examples/rick-morty) - [Source](./examples/rick-morty)
18+
- Nextjs - [CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-query/tree/master/examples/nextjs) - [Source](./examples/nextjs)

‎docs/src/pages/docs/examples/nextjs.mdx‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
---
2+
id: nextjs
3+
title: Nextjs SSR
4+
toc: false
5+
---
6+
7+
- [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-query/tree/master/examples/nextjs)
8+
- [View Source](https://github.com/tannerlinsley/react-query/tree/master/examples/nextjs)
9+
10+
<iframe
11+
src="https://codesandbox.io/embed/github/tannerlinsley/react-query/tree/master/examples/nextjs?autoresize=1&fontsize=14&theme=dark"
12+
title="tannerlinsley/react-query: nextjs"
13+
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
14+
style={{
15+
width: '100%',
16+
height: '80vh',
17+
border: '0',
18+
borderRadius: 8,
19+
overflow: 'hidden',
20+
position: 'static',
21+
zIndex: 0,
22+
}}
23+
></iframe>

‎examples/nextjs/.gitignore‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.js
7+
8+
# testing
9+
/coverage
10+
11+
# next.js
12+
/.next/
13+
/out/
14+
15+
# production
16+
/build
17+
18+
# misc
19+
.DS_Store
20+
*.pem
21+
22+
# debug
23+
npm-debug.log*
24+
yarn-debug.log*
25+
yarn-error.log*

‎examples/nextjs/README.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
# Example
2+
3+
In this simple example, we integrate React-Query seamlessly with Next.js data fetching methods to fetch queries in the server and hydrate them in the browser.
4+
5+
In addition to fetching and mutating data, React-Query analyzes your queries and their results to construct a client-side cache of your data, which is kept up to date as further queries and mutations are run.
6+
7+
To run this example:
8+
9+
- `npm install` or `yarn`
10+
- `npm run dev` or `yarn dev`

‎examples/nextjs/components/Header/index.js‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import React from 'react'
2+
import { useRouter } from 'next/router'
3+
import Link from 'next/link'
4+
5+
export const Header = () => {
6+
const { pathname } = useRouter()
7+
8+
return (
9+
<header>
10+
<Link href="/">
11+
<a className={pathname === '/' ? 'is-active' : ''}>Home</a>
12+
</Link>
13+
<Link href="/client-only">
14+
<a className={pathname === '/client-only' ? 'is-active' : ''}>
15+
Client-Only
16+
</a>
17+
</Link>
18+
<style jsx>{`
19+
header {
20+
margin-bottom: 25px;
21+
}
22+
a {
23+
font-size: 14px;
24+
margin-right: 15px;
25+
text-decoration: none;
26+
}
27+
.is-active {
28+
text-decoration: underline;
29+
}
30+
`}</style>
31+
</header>
32+
)
33+
}

‎examples/nextjs/components/InfoBox/index.js‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import React from 'react'
2+
3+
const InfoBox = ({ children }) => (
4+
<div className="info">
5+
<style jsx>{`
6+
.info {
7+
margin-top: 20px;
8+
margin-bottom: 20px;
9+
padding-top: 20px;
10+
padding-bottom: 20px;
11+
border-top: 1px solid #ececec;
12+
border-bottom: 1px solid #ececec;
13+
}
14+
`}</style>
15+
{children}
16+
</div>
17+
)
18+
19+
export { InfoBox }

‎examples/nextjs/components/Layout/index.js‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import React from 'react'
2+
3+
export const Layout = ({ children }) => {
4+
return (
5+
<main>
6+
{children}
7+
<style jsx global>{`
8+
* {
9+
font-family: Menlo, Monaco, 'Lucida Console', 'Liberation Mono',
10+
'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Courier New',
11+
monospace, serif;
12+
}
13+
body {
14+
margin: 0;
15+
padding: 25px 50px;
16+
}
17+
a {
18+
color: #22bad9;
19+
}
20+
p {
21+
font-size: 14px;
22+
line-height: 24px;
23+
}
24+
article {
25+
margin: 0 auto;
26+
max-width: 650px;
27+
}
28+
button {
29+
align-items: center;
30+
background-color: #22bad9;
31+
border: 0;
32+
color: white;
33+
display: flex;
34+
padding: 5px 7px;
35+
transition: background-color 0.3s;
36+
}
37+
button:active {
38+
background-color: #1b9db7;
39+
}
40+
button:disabled {
41+
background-color: #b5bebf;
42+
}
43+
button:focus {
44+
outline: none;
45+
}
46+
`}</style>
47+
</main>
48+
)
49+
}

‎examples/nextjs/components/PostList/index.js‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
import React, { useState } from 'react'
2+
import { usePosts } from '../../hooks/usePosts'
3+
4+
export const PostList = ({ isClient }) => {
5+
const [postCount, setPostCount] = useState(10)
6+
const { data, isFetching } = usePosts(postCount, isClient)
7+
if (isFetching) return <div>Loading</div>
8+
9+
return (
10+
<section>
11+
<ul>
12+
{data?.map((post, index) => (
13+
<li key={post.id}>
14+
<div>
15+
<span>{index + 1}. </span>
16+
<a href="#">{post.title}</a>
17+
</div>
18+
</li>
19+
))}
20+
</ul>
21+
{postCount <= 90 && (
22+
<button
23+
onClick={() => setPostCount(postCount + 10)}
24+
disabled={isFetching}
25+
>
26+
{isFetching ? 'Loading...' : 'Show More'}
27+
</button>
28+
)}
29+
<style jsx>{`
30+
section {
31+
padding-bottom: 20px;
32+
}
33+
li {
34+
display: block;
35+
margin-bottom: 10px;
36+
}
37+
div {
38+
align-items: center;
39+
display: flex;
40+
}
41+
a {
42+
font-size: 14px;
43+
margin-right: 10px;
44+
text-decoration: none;
45+
padding-bottom: 0;
46+
border: 0;
47+
}
48+
span {
49+
font-size: 14px;
50+
margin-right: 5px;
51+
}
52+
ul {
53+
margin: 0;
54+
padding: 0;
55+
}
56+
button:before {
57+
align-self: center;
58+
border-style: solid;
59+
border-width: 6px 4px 0 4px;
60+
border-color: #ffffff transparent transparent transparent;
61+
content: '';
62+
height: 0;
63+
margin-right: 5px;
64+
width: 0;
65+
}
66+
`}</style>
67+
</section>
68+
)
69+
}

‎examples/nextjs/components/index.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
export * from './Layout'
2+
export * from './Header'
3+
export * from './InfoBox'
4+
export * from './PostList'

‎examples/nextjs/hooks/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './usePosts'

0 commit comments

Comments
 (0)