Skip to content

Commit cfe59c7

Browse files
wpcodevowpcodevo
committed
updated
1 parent 3db7b89 commit cfe59c7

File tree

8 files changed

+177
-72
lines changed

8 files changed

+177
-72
lines changed

‎next.config.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,9 @@ const nextConfig = {
33
experimental: {
44
appDir: true,
55
},
6+
images: {
7+
domains: ["robohash.org"],
8+
},
69
}
710

811
module.exports = nextConfig

‎package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,13 @@
1212
"@tanstack/query-core": "^4.29.5",
1313
"@tanstack/react-query": "^4.29.5",
1414
"@tanstack/react-query-devtools": "^4.27.0",
15+
"@tanstack/react-query-next-experimental": "^5.0.0-alpha.80",
1516
"@types/node": "18.15.3",
1617
"@types/react": "18.0.28",
1718
"@types/react-dom": "18.0.11",
1819
"eslint": "8.36.0",
1920
"eslint-config-next": "13.2.4",
20-
"next": "^13.4.9",
21+
"next": "^13.4.10",
2122
"react": "18.2.0",
2223
"react-dom": "18.2.0",
2324
"typescript": "5.0.2"

‎src/app/hydration-stream-suspense/counter.tsx

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
"use client";
2+
3+
import { useState } from "react";
4+
5+
export default function Counter() {
6+
const [count, setCount] = useState(0);
7+
8+
return (
9+
<div style={{ marginBottom: "4rem", textAlign: "center" }}>
10+
<h4 style={{ marginBottom: 16 }}>{count}</h4>
11+
<button onClick={() => setCount((prev) => prev + 1)}>increment</button>
12+
<button
13+
onClick={() => setCount((prev) => prev - 1)}
14+
style={{ marginInline: 16 }}
15+
>
16+
decrement
17+
</button>
18+
<button onClick={() => setCount(0)}>reset</button>
19+
</div>
20+
);
21+
}

‎src/app/hydration-stream-suspense/list-users.tsx

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
"use client";
2+
3+
import { User } from "../types";
4+
import { useQuery } from "@tanstack/react-query";
5+
import Image from "next/image";
6+
7+
async function getUsers() {
8+
return (await fetch("https://jsonplaceholder.typicode.com/users").then(
9+
(res) => res.json()
10+
)) as User[];
11+
}
12+
13+
export default function ListUsers() {
14+
const { data, isLoading, isFetching, error } = useQuery<User[]>({
15+
queryKey: ["stream-hydrate-users"],
16+
queryFn: () => getUsers(),
17+
suspense: true,
18+
staleTime: 5 * 1000,
19+
});
20+
21+
return (
22+
<>
23+
{error ? (
24+
<p>Oh no, there was an error</p>
25+
) : isFetching || isLoading ? (
26+
<p style={{ textAlign: "center" }}>loading... on the client-side</p>
27+
) : data ? (
28+
<div
29+
style={{
30+
display: "grid",
31+
gridTemplateColumns: "1fr 1fr 1fr 1fr",
32+
gap: 20,
33+
}}
34+
>
35+
{data?.map((user) => (
36+
<div
37+
key={user.id}
38+
style={{ border: "1px solid #ccc", textAlign: "center" }}
39+
>
40+
<Image
41+
src={`https://robohash.org/${user.id}?set=set2&size=180x180`}
42+
alt={user.name}
43+
width={180}
44+
height={180}
45+
/>
46+
<h3>{user.name}</h3>
47+
</div>
48+
))}
49+
</div>
50+
) : null}
51+
</>
52+
);
53+
}

‎src/app/hydration-stream-suspense/page.tsx

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import Counter from "./counter";
2+
import ListUsers from "./list-users";
3+
import { Suspense } from "react";
4+
5+
export default async function Page() {
6+
return (
7+
<main style={{ maxWidth: 1200, marginInline: "auto", padding: 20 }}>
8+
<Counter />
9+
<Suspense
10+
fallback={
11+
<p style={{ textAlign: "center" }}>loading... on initial request</p>
12+
}
13+
>
14+
<ListUsers />
15+
</Suspense>
16+
</main>
17+
);
18+
}

‎src/app/page.tsx

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,19 @@ import Link from "next/link";
22

33
export default function Home() {
44
return (
5-
<>
5+
<div>
66
<h1>Hello, Next.js 13 App Directory!</h1>
7+
<p>
8+
<Link href="/hydration-stream-suspense">
9+
(recommended method): React Query With Streamed Hydration
10+
</Link>
11+
</p>
712
<p>
813
<Link href="/initial-data">Prefetching Using initial data</Link>
914
</p>
1015
<p>
1116
<Link href="/hydration">Prefetching Using Hydration</Link>
1217
</p>
13-
</>
18+
</div>
1419
);
1520
}

‎src/utils/provider.tsx

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,14 @@
33
import React from "react";
44
import { QueryClientProvider, QueryClient } from "@tanstack/react-query";
55
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
6+
import { ReactQueryStreamedHydration } from "@tanstack/react-query-next-experimental";
67

78
function Providers({ children }: React.PropsWithChildren) {
8-
const [client] = React.useState(
9-
new QueryClient({ defaultOptions: { queries: { staleTime: 5000 } } })
10-
);
9+
const [client] = React.useState(new QueryClient());
1110

1211
return (
1312
<QueryClientProvider client={client}>
14-
{children}
13+
<ReactQueryStreamedHydration>{children}</ReactQueryStreamedHydration>
1514
<ReactQueryDevtools initialIsOpen={false} />
1615
</QueryClientProvider>
1716
);

‎yarn.lock

Lines changed: 70 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -60,10 +60,10 @@
6060
resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz#b520529ec21d8e5945a1851dfd1c32e94e39ff45"
6161
integrity sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==
6262

63-
"@next/[email protected].9":
64-
version "13.4.9"
65-
resolved "https://registry.yarnpkg.com/@next/env/-/env-13.4.9.tgz#b77759514dd56bfa9791770755a2482f4d6ca93e"
66-
integrity sha512-vuDRK05BOKfmoBYLNi2cujG2jrYbEod/ubSSyqgmEx9n/W3eZaJQdRNhTfumO+qmq/QTzLurW487n/PM/fHOkw==
63+
"@next/[email protected].10":
64+
version "13.4.10"
65+
resolved "https://registry.yarnpkg.com/@next/env/-/env-13.4.10.tgz#8b17783d2c09be126bbde9ff1164566517131bff"
66+
integrity sha512-3G1yD/XKTSLdihyDSa8JEsaWOELY+OWe08o0LUYzfuHp1zHDA8SObQlzKt+v+wrkkPcnPweoLH1ImZeUa0A1NQ==
6767

6868
"@next/[email protected]":
6969
version "13.2.4"
@@ -72,50 +72,50 @@
7272
dependencies:
7373
glob "7.1.7"
7474

75-
"@next/[email protected].9":
76-
version "13.4.9"
77-
resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.4.9.tgz#0ed408d444bbc6b0a20f3506a9b4222684585677"
78-
integrity sha512-TVzGHpZoVBk3iDsTOQA/R6MGmFp0+17SWXMEWd6zG30AfuELmSSMe2SdPqxwXU0gbpWkJL1KgfLzy5ReN0crqQ==
79-
80-
"@next/[email protected].9":
81-
version "13.4.9"
82-
resolved "https://registry.yarnpkg.com/@next/swc-darwin-x64/-/swc-darwin-x64-13.4.9.tgz#a08fccdee68201522fe6618ec81f832084b222f8"
83-
integrity sha512-aSfF1fhv28N2e7vrDZ6zOQ+IIthocfaxuMWGReB5GDriF0caTqtHttAvzOMgJgXQtQx6XhyaJMozLTSEXeNN+A==
84-
85-
"@next/[email protected].9":
86-
version "13.4.9"
87-
resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.4.9.tgz#1798c2341bb841e96521433eed00892fb24abbd1"
88-
integrity sha512-JhKoX5ECzYoTVyIy/7KykeO4Z2lVKq7HGQqvAH+Ip9UFn1MOJkOnkPRB7v4nmzqAoY+Je05Aj5wNABR1N18DMg==
89-
90-
"@next/[email protected].9":
91-
version "13.4.9"
92-
resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.4.9.tgz#cee04c51610eddd3638ce2499205083656531ea0"
93-
integrity sha512-OOn6zZBIVkm/4j5gkPdGn4yqQt+gmXaLaSjRSO434WplV8vo2YaBNbSHaTM9wJpZTHVDYyjzuIYVEzy9/5RVZw==
94-
95-
"@next/[email protected].9":
96-
version "13.4.9"
97-
resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.4.9.tgz#1932d0367916adbc6844b244cda1d4182bd11f7a"
98-
integrity sha512-iA+fJXFPpW0SwGmx/pivVU+2t4zQHNOOAr5T378PfxPHY6JtjV6/0s1vlAJUdIHeVpX98CLp9k5VuKgxiRHUpg==
99-
100-
"@next/[email protected].9":
101-
version "13.4.9"
102-
resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.4.9.tgz#a66aa8c1383b16299b72482f6360facd5cde3c7a"
103-
integrity sha512-rlNf2WUtMM+GAQrZ9gMNdSapkVi3koSW3a+dmBVp42lfugWVvnyzca/xJlN48/7AGx8qu62WyO0ya1ikgOxh6A==
104-
105-
"@next/[email protected].9":
106-
version "13.4.9"
107-
resolved "https://registry.yarnpkg.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.4.9.tgz#39482ee856c867177a612a30b6861c75e0736a4a"
108-
integrity sha512-5T9ybSugXP77nw03vlgKZxD99AFTHaX8eT1ayKYYnGO9nmYhJjRPxcjU5FyYI+TdkQgEpIcH7p/guPLPR0EbKA==
109-
110-
"@next/[email protected].9":
111-
version "13.4.9"
112-
resolved "https://registry.yarnpkg.com/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.4.9.tgz#29db85e34b597ade1a918235d16a760a9213c190"
113-
integrity sha512-ojZTCt1lP2ucgpoiFgrFj07uq4CZsq4crVXpLGgQfoFq00jPKRPgesuGPaz8lg1yLfvafkU3Jd1i8snKwYR3LA==
114-
115-
"@next/[email protected].9":
116-
version "13.4.9"
117-
resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.4.9.tgz#0c2758164cccd61bc5a1c6cd8284fe66173e4a2b"
118-
integrity sha512-QbT03FXRNdpuL+e9pLnu+XajZdm/TtIXVYY4lA9t+9l0fLZbHXDYEKitAqxrOj37o3Vx5ufxiRAniaIebYDCgw==
75+
"@next/[email protected].10":
76+
version "13.4.10"
77+
resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.4.10.tgz#962ac55559970d1725163ff9d62d008bc1c33503"
78+
integrity sha512-4bsdfKmmg7mgFGph0UorD1xWfZ5jZEw4kKRHYEeTK9bT1QnMbPVPlVXQRIiFPrhoDQnZUoa6duuPUJIEGLV1Jg==
79+
80+
"@next/[email protected].10":
81+
version "13.4.10"
82+
resolved "https://registry.yarnpkg.com/@next/swc-darwin-x64/-/swc-darwin-x64-13.4.10.tgz#90c01fdce5101953df0039eef48e4074055cc5aa"
83+
integrity sha512-ngXhUBbcZIWZWqNbQSNxQrB9T1V+wgfCzAor2olYuo/YpaL6mUYNUEgeBMhr8qwV0ARSgKaOp35lRvB7EmCRBg==
84+
85+
"@next/[email protected].10":
86+
version "13.4.10"
87+
resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.4.10.tgz#8fc25052c345ffc8f6c51f61d1bb6c359b80ab2b"
88+
integrity sha512-SjCZZCOmHD4uyM75MVArSAmF5Y+IJSGroPRj2v9/jnBT36SYFTORN8Ag/lhw81W9EeexKY/CUg2e9mdebZOwsg==
89+
90+
"@next/[email protected].10":
91+
version "13.4.10"
92+
resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.4.10.tgz#25e6b0dbb87c89c44c3e3680227172862bc7072c"
93+
integrity sha512-F+VlcWijX5qteoYIOxNiBbNE8ruaWuRlcYyIRK10CugqI/BIeCDzEDyrHIHY8AWwbkTwe6GRHabMdE688Rqq4Q==
94+
95+
"@next/[email protected].10":
96+
version "13.4.10"
97+
resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.4.10.tgz#24fa8070ea0855c0aa020832ce7d1b84d3413fc1"
98+
integrity sha512-WDv1YtAV07nhfy3i1visr5p/tjiH6CeXp4wX78lzP1jI07t4PnHHG1WEDFOduXh3WT4hG6yN82EQBQHDi7hBrQ==
99+
100+
"@next/[email protected].10":
101+
version "13.4.10"
102+
resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.4.10.tgz#ae55914d50589a4f8b91c8eeebdd713f0c1b1675"
103+
integrity sha512-zFkzqc737xr6qoBgDa3AwC7jPQzGLjDlkNmt/ljvQJ/Veri5ECdHjZCUuiTUfVjshNIIpki6FuP0RaQYK9iCRg==
104+
105+
"@next/[email protected].10":
106+
version "13.4.10"
107+
resolved "https://registry.yarnpkg.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.4.10.tgz#ab3098b2305f3c0e46dfb2e318a9988bff884047"
108+
integrity sha512-IboRS8IWz5mWfnjAdCekkl8s0B7ijpWeDwK2O8CdgZkoCDY0ZQHBSGiJ2KViAG6+BJVfLvcP+a2fh6cdyBr9QQ==
109+
110+
"@next/[email protected].10":
111+
version "13.4.10"
112+
resolved "https://registry.yarnpkg.com/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.4.10.tgz#a1c5980538641ca656012c00d05b08882cf0ec9f"
113+
integrity sha512-bSA+4j8jY4EEiwD/M2bol4uVEu1lBlgsGdvM+mmBm/BbqofNBfaZ2qwSbwE2OwbAmzNdVJRFRXQZ0dkjopTRaQ==
114+
115+
"@next/[email protected].10":
116+
version "13.4.10"
117+
resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.4.10.tgz#44dd9eea943ed14a1012edd5011b8e905f5e6fc4"
118+
integrity sha512-g2+tU63yTWmcVQKDGY0MV1PjjqgZtwM4rB1oVVi/v0brdZAcrcTV+04agKzWtvWroyFz6IqtT0MoZJA7PNyLVw==
119119

120120
"@nodelib/[email protected]":
121121
version "2.1.5"
@@ -183,6 +183,11 @@
183183
superjson "^1.10.0"
184184
use-sync-external-store "^1.2.0"
185185

186+
"@tanstack/react-query-next-experimental@^5.0.0-alpha.80":
187+
version "5.0.0-alpha.80"
188+
resolved "https://registry.yarnpkg.com/@tanstack/react-query-next-experimental/-/react-query-next-experimental-5.0.0-alpha.80.tgz#8ecdb7251221c000b19872f7b92789dcd68ce2e8"
189+
integrity sha512-J+rHrE+5BVEAoZVlvp5wryBdusKDBRrzysfpgOa4t6vcVRWHgzNlmWJFHelgipdHJrA3/4D6wSir8xmkp8ijtA==
190+
186191
"@tanstack/react-query@^4.29.5":
187192
version "4.29.5"
188193
resolved "https://registry.yarnpkg.com/@tanstack/react-query/-/react-query-4.29.5.tgz#3890741291f9f925933243d78bd74dfc59d64208"
@@ -433,9 +438,9 @@ callsites@^3.0.0:
433438
integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==
434439

435440
caniuse-lite@^1.0.30001406:
436-
version "1.0.30001515"
437-
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001515.tgz#418aefeed9d024cd3129bfae0ccc782d4cb8f12b"
438-
integrity sha512-eEFDwUOZbE24sb+Ecsx3+OvNETqjWIdabMy52oOkIgcUtAsQifjUG9q4U9dgTHJM2mfk4uEPxc0+xuFdJ629QA==
441+
version "1.0.30001516"
442+
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001516.tgz#621b1be7d85a8843ee7d210fd9d87b52e3daab3a"
443+
integrity sha512-Wmec9pCBY8CWbmI4HsjBeQLqDTqV91nFVR83DnZpYyRnPI1wePDsTg0bGLPC5VU/3OIZV1fmxEea1b+tFKe86g==
439444

440445
chalk@^4.0.0:
441446
version "4.1.2"
@@ -1497,12 +1502,12 @@ natural-compare@^1.4.0:
14971502
resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
14981503
integrity sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==
14991504

1500-
next@^13.4.9:
1501-
version "13.4.9"
1502-
resolved "https://registry.yarnpkg.com/next/-/next-13.4.9.tgz#473de5997cb4c5d7a4fb195f566952a1cbffbeba"
1503-
integrity sha512-vtefFm/BWIi/eWOqf1GsmKG3cjKw1k3LjuefKRcL3iiLl3zWzFdPG3as6xtxrGO6gwTzzaO1ktL4oiHt/uvTjA==
1505+
next@^13.4.10:
1506+
version "13.4.10"
1507+
resolved "https://registry.yarnpkg.com/next/-/next-13.4.10.tgz#a5b50696759c61663d5a1dd726995fa0576a382e"
1508+
integrity sha512-4ep6aKxVTQ7rkUW2fBLhpBr/5oceCuf4KmlUpvG/aXuDTIf9mexNSpabUD6RWPspu6wiJJvozZREhXhueYO36A==
15041509
dependencies:
1505-
"@next/env" "13.4.9"
1510+
"@next/env" "13.4.10"
15061511
"@swc/helpers" "0.5.1"
15071512
busboy "1.6.0"
15081513
caniuse-lite "^1.0.30001406"
@@ -1511,15 +1516,15 @@ next@^13.4.9:
15111516
watchpack "2.4.0"
15121517
zod "3.21.4"
15131518
optionalDependencies:
1514-
"@next/swc-darwin-arm64" "13.4.9"
1515-
"@next/swc-darwin-x64" "13.4.9"
1516-
"@next/swc-linux-arm64-gnu" "13.4.9"
1517-
"@next/swc-linux-arm64-musl" "13.4.9"
1518-
"@next/swc-linux-x64-gnu" "13.4.9"
1519-
"@next/swc-linux-x64-musl" "13.4.9"
1520-
"@next/swc-win32-arm64-msvc" "13.4.9"
1521-
"@next/swc-win32-ia32-msvc" "13.4.9"
1522-
"@next/swc-win32-x64-msvc" "13.4.9"
1519+
"@next/swc-darwin-arm64" "13.4.10"
1520+
"@next/swc-darwin-x64" "13.4.10"
1521+
"@next/swc-linux-arm64-gnu" "13.4.10"
1522+
"@next/swc-linux-arm64-musl" "13.4.10"
1523+
"@next/swc-linux-x64-gnu" "13.4.10"
1524+
"@next/swc-linux-x64-musl" "13.4.10"
1525+
"@next/swc-win32-arm64-msvc" "13.4.10"
1526+
"@next/swc-win32-ia32-msvc" "13.4.10"
1527+
"@next/swc-win32-x64-msvc" "13.4.10"
15231528

15241529
object-assign@^4.1.1:
15251530
version "4.1.1"

0 commit comments

Comments
 (0)