├── .eslintrc.json
├── .gitignore
├── Makefile
├── README.md
├── app
├── favicon.ico
├── globals.css
├── hydration
│ ├── list-users.tsx
│ └── page.tsx
├── initial-data
│ ├── list-users.tsx
│ └── page.tsx
├── layout.tsx
└── page.tsx
├── next.config.js
├── package.json
├── pnpm-lock.yaml
├── postcss.config.js
├── providers
└── ReactQueryProvider.tsx
├── public
├── next.svg
└── vercel.svg
├── tailwind.config.ts
├── tsconfig.json
└── utils
└── api-requests.ts
/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "next/core-web-vitals"
3 | }
4 |
--------------------------------------------------------------------------------
/.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 | .yarn/install-state.gz
8 |
9 | # testing
10 | /coverage
11 |
12 | # next.js
13 | /.next/
14 | /out/
15 |
16 | # production
17 | /build
18 |
19 | # misc
20 | .DS_Store
21 | *.pem
22 |
23 | # debug
24 | npm-debug.log*
25 | yarn-debug.log*
26 | yarn-error.log*
27 |
28 | # local env files
29 | .env*.local
30 |
31 | # vercel
32 | .vercel
33 |
34 | # typescript
35 | *.tsbuildinfo
36 | next-env.d.ts
37 |
--------------------------------------------------------------------------------
/Makefile:
--------------------------------------------------------------------------------
1 | create-project:
2 | pnpm create next-app nextjs14-react-query
3 |
4 | install-dependencies:
5 | pnpm add @tanstack/react-query
6 | pnpm add @tanstack/query-core
7 | pnpm add -D @tanstack/eslint-plugin-query
8 | pnpm add -D @tanstack/react-query-devtools
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # How to Set Up and Use React Query in Next.js 14
2 |
3 | This article will teach you how to set up and use React Query v5 in the new Next.js 14 app directory. With the recent release of React Query v5, it has generated considerable buzz in the React ecosystem, primarily due to improvements in Automatic Data Synchronization and Performance Optimizations.
4 |
5 | 
6 |
7 | ### Topics Covered
8 |
9 | - Set Up the Next.js 14 Project
10 | - Create a React Query Client Provider
11 | - Wrap the QueryClient Provider Around the Root Children
12 | - Prefetching Data Using Initial Data
13 | - Fetch the Data in a Client Component
14 | - Prefetch the Data in a Server Component
15 | - Prefetching Data Using Hydration and Dehydration
16 | - Fetch the Data in a Client Component
17 | - Hydrate and Dehydrate the Query Client
18 | - Conclusion
19 |
20 |
21 | Read the entire article here: [https://codevoweb.com/how-to-set-up-and-use-react-query-in-next-js-14/](https://codevoweb.com/how-to-set-up-and-use-react-query-in-next-js-14/)
22 |
--------------------------------------------------------------------------------
/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wpcodevo/nextjs14-react-query/e9ff2f198ae077c3e512c0a5d8244e42273f55b9/app/favicon.ico
--------------------------------------------------------------------------------
/app/globals.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
5 | :root {
6 | --foreground-rgb: 0, 0, 0;
7 | --background-start-rgb: 214, 219, 220;
8 | --background-end-rgb: 255, 255, 255;
9 | }
10 |
11 | @media (prefers-color-scheme: dark) {
12 | :root {
13 | --foreground-rgb: 255, 255, 255;
14 | --background-start-rgb: 0, 0, 0;
15 | --background-end-rgb: 0, 0, 0;
16 | }
17 | }
18 |
19 | body {
20 | color: rgb(var(--foreground-rgb));
21 | background: linear-gradient(
22 | to bottom,
23 | transparent,
24 | rgb(var(--background-end-rgb))
25 | )
26 | rgb(var(--background-start-rgb));
27 | }
28 |
--------------------------------------------------------------------------------
/app/hydration/list-users.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import { getUsers } from '@/utils/api-requests';
4 | import { useQuery } from '@tanstack/react-query';
5 | import Image from 'next/image';
6 | import React from 'react';
7 |
8 | export default function ListUsers() {
9 | const [count, setCount] = React.useState(0);
10 |
11 | const { data } = useQuery({
12 | queryKey: ['hydrate-users'],
13 | queryFn: () => getUsers(),
14 | staleTime: 10 * 1000,
15 | });
16 |
17 | return (
18 |
19 |
20 |
{count}
21 |
22 |
28 |
29 |
30 |
31 | {
32 |
39 | {data?.map((user) => (
40 |
44 |
50 |
{user.name}
51 |
52 | ))}
53 |
21 |
{count}
22 |
23 |
29 |
30 |
31 |
32 | {
33 |
40 | {data.map((user) => (
41 |
45 |
51 |
{user.name}
52 |
53 | ))}
54 |
{children}
23 |
24 |
25 |
26 | );
27 | }
28 |
--------------------------------------------------------------------------------
/app/page.tsx:
--------------------------------------------------------------------------------
1 | import Link from "next/link";
2 |
3 | export default function Home() {
4 | return (
5 |
6 |
Hello, Next.js 14 App Directory!
7 |
8 |
9 | Prefetching Using initial data --- Good for SEO
10 |
11 |
12 |
13 |
14 | Prefetching Using Hydration --- Good for SEO
15 |
16 |
17 |