├── README.md
├── pages
    ├── api
    │   └── data.js
    └── index.js
├── package.json
└── .gitignore


/README.md:
--------------------------------------------------------------------------------
1 | This is a starter template for [Learn Next.js](https://nextjs.org/learn).


--------------------------------------------------------------------------------
/pages/api/data.js:
--------------------------------------------------------------------------------
 1 | const items = ['list_one', 'list_two']
 2 | 
 3 | export default async (req, res) => {
 4 |   await new Promise(r => setTimeout(r, 1000))
 5 | 
 6 |   if (req.method === 'POST') {
 7 |     const { text } = req.body
 8 | 
 9 |     items.push(text)
10 |     res.json(text)
11 |     return
12 |   } else {
13 |     res.json({
14 |       ts: Date.now(),
15 |       items,
16 |     })
17 |   }
18 | }
19 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "learn-starter",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build",
 8 |     "start": "next start"
 9 |   },
10 |   "dependencies": {
11 |     "axios": "^0.19.2",
12 |     "isomorphic-unfetch": "3.0.0",
13 |     "next": "9.2.2",
14 |     "react": "16.13.0",
15 |     "react-dom": "16.13.0",
16 |     "react-query": "^2",
17 |     "react-query-devtools": "latest"
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 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 | 
21 | # debug
22 | npm-debug.log*
23 | yarn-debug.log*
24 | yarn-error.log*
25 | 
26 | # local env files
27 | .env.local
28 | .env.development.local
29 | .env.test.local
30 | .env.production.local
31 | 


--------------------------------------------------------------------------------
/pages/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import axios from 'axios'
 3 | 
 4 | import { useQuery, useMutation, queryCache } from 'react-query'
 5 | import { ReactQueryDevtools } from 'react-query-devtools'
 6 | 
 7 | export default () => {
 8 |   const [text, setText] = React.useState('')
 9 |   const { status, data, error, isFetching } = useQuery('todos', async () => {
10 |     const { data } = await axios.get('/api/data')
11 |     return data
12 |   })
13 | 
14 |   const [mutatePostTodo] = useMutation(
15 |     text => axios.post('/api/data', { text }),
16 |     {
17 |       onSuccess: () => {
18 |         // Query Invalidations
19 |         // queryCache.invalidateQueries('todos')
20 |         setText('')
21 |       },
22 |     }
23 |   )
24 | 
25 |   return (
26 |     <div>
27 |       <p>
28 |         When adding new items, the useMutation hook will observe the result of the asynchronous function.
29 |         You can invalidate the query on success, and React Query will refetch the query with the same key.
30 |       </p>
31 |       <form
32 |         onSubmit={e => {
33 |           e.preventDefault()
34 |           mutatePostTodo(text)
35 |         }}
36 |       >
37 |         <input
38 |           type="text"
39 |           onChange={event => setText(event.target.value)}
40 |           value={text}
41 |         />
42 |         <button>Create</button>
43 |       </form>
44 |       <br />
45 |       {status === 'loading' ? (
46 |         'Loading...'
47 |       ) : status === 'error' ? (
48 |         error.message
49 |       ) : (
50 |         <>
51 |           <div>Updated At: {new Date(data.ts).toLocaleTimeString()}</div>
52 |           <ul>
53 |             {data.items.map(datum => (
54 |               <li key={datum}>{datum}</li>
55 |             ))}
56 |           </ul>
57 |           <div>{isFetching ? 'Updating in background...' : ' '}</div>
58 |         </>
59 |       )}
60 |       <ReactQueryDevtools initialIsOpen />
61 |     </div>
62 |   )
63 | }


--------------------------------------------------------------------------------