Skip to content

Commit d311666

Browse files
wpcodevowpcodevo
committed
updated
1 parent 984acf6 commit d311666

File tree

6 files changed

+48
-57
lines changed

6 files changed

+48
-57
lines changed

‎package.json

+3-3
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,9 @@
99
"lint": "next lint"
1010
},
1111
"dependencies": {
12-
"@tanstack/query-core": "^4.29.5",
13-
"@tanstack/react-query": "^4.29.5",
14-
"@tanstack/react-query-devtools": "^4.27.0",
12+
"@tanstack/query-core": "^4.29.25",
13+
"@tanstack/react-query": "^4.29.25",
14+
"@tanstack/react-query-devtools": "^4.29.25",
1515
"@tanstack/react-query-next-experimental": "^5.0.0-alpha.80",
1616
"@types/node": "18.15.3",
1717
"@types/react": "18.0.28",

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

+5-11
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22

33
import { User } from "../types";
44
import { useQuery } from "@tanstack/react-query";
5-
import Image from "next/image";
65
import React from "react";
76

87
async function getUsers() {
@@ -13,7 +12,7 @@ async function getUsers() {
1312

1413
export default function ListUsers() {
1514
const [count, setCount] = React.useState(0);
16-
const { data, isLoading, isFetching, error } = useQuery<User[]>({
15+
const { data } = useQuery<User[]>({
1716
queryKey: ["stream-hydrate-users"],
1817
queryFn: () => getUsers(),
1918
suspense: true,
@@ -33,11 +32,7 @@ export default function ListUsers() {
3332
return (
3433
<>
3534
<p>{count}</p>
36-
{error ? (
37-
<p>Oh no, there was an error</p>
38-
) : isFetching || isLoading ? (
39-
<p style={{ textAlign: "center" }}>loading... on the client-side</p>
40-
) : data ? (
35+
{
4136
<div
4237
style={{
4338
display: "grid",
@@ -50,17 +45,16 @@ export default function ListUsers() {
5045
key={user.id}
5146
style={{ border: "1px solid #ccc", textAlign: "center" }}
5247
>
53-
<Image
48+
<img
5449
src={`https://robohash.org/${user.id}?set=set2&size=180x180`}
5550
alt={user.name}
56-
width={180}
57-
height={180}
51+
style={{ width: 180, height: 180 }}
5852
/>
5953
<h3>{user.name}</h3>
6054
</div>
6155
))}
6256
</div>
63-
) : null}
57+
}
6458
</>
6559
);
6660
}

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

+4-8
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ async function getUsers() {
1313
export default function ListUsers() {
1414
const [count, setCount] = React.useState(0);
1515

16-
const { data, isLoading, isFetching, error } = useQuery({
16+
const { data } = useQuery({
1717
queryKey: ["hydrate-users"],
1818
queryFn: () => getUsers(),
1919
});
@@ -32,19 +32,15 @@ export default function ListUsers() {
3232
<button onClick={() => setCount(0)}>reset</button>
3333
</div>
3434

35-
{error ? (
36-
<p>Oh no, there was an error</p>
37-
) : isLoading || isFetching ? (
38-
<p>Loading...</p>
39-
) : data ? (
35+
{
4036
<div
4137
style={{
4238
display: "grid",
4339
gridTemplateColumns: "1fr 1fr 1fr 1fr",
4440
gap: 20,
4541
}}
4642
>
47-
{data.map((user) => (
43+
{data?.map((user) => (
4844
<div
4945
key={user.id}
5046
style={{ border: "1px solid #ccc", textAlign: "center" }}
@@ -58,7 +54,7 @@ export default function ListUsers() {
5854
</div>
5955
))}
6056
</div>
61-
) : null}
57+
}
6258
</main>
6359
);
6460
}

‎src/app/initial-data/list-users.tsx

+3-7
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ async function getUsers() {
1313
export default function ListUsers({ users }: { users: User[] }) {
1414
const [count, setCount] = React.useState(0);
1515

16-
const { data, isLoading, isFetching, error } = useQuery({
16+
const { data } = useQuery({
1717
queryKey: ["initial-users"],
1818
queryFn: () => getUsers(),
1919
initialData: users,
@@ -32,11 +32,7 @@ export default function ListUsers({ users }: { users: User[] }) {
3232
<button onClick={() => setCount(0)}>reset</button>
3333
</div>
3434

35-
{error ? (
36-
<p>Oh no, there was an error</p>
37-
) : isLoading || isFetching ? (
38-
<p>Loading...</p>
39-
) : data ? (
35+
{
4036
<div
4137
style={{
4238
display: "grid",
@@ -58,7 +54,7 @@ export default function ListUsers({ users }: { users: User[] }) {
5854
</div>
5955
))}
6056
</div>
61-
) : null}
57+
}
6258
</main>
6359
);
6460
}

‎src/app/page.tsx

+8-3
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,19 @@ export default function Home() {
66
<h1>Hello, Next.js 13 App Directory!</h1>
77
<p>
88
<Link href="/hydration-stream-suspense">
9-
(recommended method): React Query With Streamed Hydration
9+
(recommended method): React Query With Streamed Hydration --- Bad for
10+
SEO
1011
</Link>
1112
</p>
1213
<p>
13-
<Link href="/initial-data">Prefetching Using initial data</Link>
14+
<Link href="/initial-data">
15+
Prefetching Using initial data --- Good for SEO
16+
</Link>
1417
</p>
1518
<p>
16-
<Link href="/hydration">Prefetching Using Hydration</Link>
19+
<Link href="/hydration">
20+
Prefetching Using Hydration --- Good for SEO
21+
</Link>
1722
</p>
1823
</div>
1924
);

‎yarn.lock

+25-25
Original file line numberDiff line numberDiff line change
@@ -163,21 +163,21 @@
163163
tslib "^2.4.0"
164164

165165
"@tanstack/match-sorter-utils@^8.7.0":
166-
version "8.7.6"
167-
resolved "https://registry.yarnpkg.com/@tanstack/match-sorter-utils/-/match-sorter-utils-8.7.6.tgz#ccf54a37447770e0cf0fe49a579c595fd2655b16"
168-
integrity sha512-2AMpRiA6QivHOUiBpQAVxjiHAA68Ei23ZUMNaRJrN6omWiSFLoYrxGcT6BXtuzp0Jw4h6HZCmGGIM/gbwebO2A==
166+
version "8.8.4"
167+
resolved "https://registry.yarnpkg.com/@tanstack/match-sorter-utils/-/match-sorter-utils-8.8.4.tgz#0b2864d8b7bac06a9f84cb903d405852cc40a457"
168+
integrity sha512-rKH8LjZiszWEvmi01NR72QWZ8m4xmXre0OOwlRGnjU01Eqz/QnN+cqpty2PJ0efHblq09+KilvyR7lsbzmXVEw==
169169
dependencies:
170170
remove-accents "0.4.2"
171171

172-
"@tanstack/[email protected].5", "@tanstack/query-core@^4.29.5":
173-
version "4.29.5"
174-
resolved "https://registry.yarnpkg.com/@tanstack/query-core/-/query-core-4.29.5.tgz#a0273e88bf2fc102c4c893dc7c034127b67fd5d9"
175-
integrity sha512-xXIiyQ/4r9KfaJ3k6kejqcaqFXXBTzN2aOJ5H1J6aTJE9hl/nbgAdfF6oiIu0CD5xowejJEJ6bBg8TO7BN4NuQ==
172+
"@tanstack/[email protected].25", "@tanstack/query-core@^4.29.25":
173+
version "4.29.25"
174+
resolved "https://registry.yarnpkg.com/@tanstack/query-core/-/query-core-4.29.25.tgz#605d357968a740544af6754004eed1dfd4587cb8"
175+
integrity sha512-DI4y4VC6Uw4wlTpOocEXDky69xeOScME1ezLKsj+hOk7DguC9fkqXtp6Hn39BVb9y0b5IBrY67q6kIX623Zj4Q==
176176

177-
"@tanstack/react-query-devtools@^4.27.0":
178-
version "4.27.0"
179-
resolved "https://registry.yarnpkg.com/@tanstack/react-query-devtools/-/react-query-devtools-4.27.0.tgz#a9ea7274bb4a12db30ca888697a62430a382b155"
180-
integrity sha512-DWtW1V2hG+I92ixr7uS3z70IMa4Yz4xwDiqyd7Af+qXGSD0cbcsnvBMyIcU20KaXW6PY1OdceX/SBkiioQUjCA==
177+
"@tanstack/react-query-devtools@^4.29.25":
178+
version "4.29.25"
179+
resolved "https://registry.yarnpkg.com/@tanstack/react-query-devtools/-/react-query-devtools-4.29.25.tgz#89d2ce3848ff4ff8873978e63ec5a063dbf63616"
180+
integrity sha512-XlrGUqmjv1O+6Ny23rAiyNSWYKep90SKT3IixDQRnIuTGaZej+hVCOh7wZSxq6qkzadIvsblc4SLtyJsOiIXBQ==
181181
dependencies:
182182
"@tanstack/match-sorter-utils" "^8.7.0"
183183
superjson "^1.10.0"
@@ -188,12 +188,12 @@
188188
resolved "https://registry.yarnpkg.com/@tanstack/react-query-next-experimental/-/react-query-next-experimental-5.0.0-alpha.80.tgz#8ecdb7251221c000b19872f7b92789dcd68ce2e8"
189189
integrity sha512-J+rHrE+5BVEAoZVlvp5wryBdusKDBRrzysfpgOa4t6vcVRWHgzNlmWJFHelgipdHJrA3/4D6wSir8xmkp8ijtA==
190190

191-
"@tanstack/react-query@^4.29.5":
192-
version "4.29.5"
193-
resolved "https://registry.yarnpkg.com/@tanstack/react-query/-/react-query-4.29.5.tgz#3890741291f9f925933243d78bd74dfc59d64208"
194-
integrity sha512-F87cibC3s3eG0Q90g2O+hqntpCrudKFnR8P24qkH9uccEhXErnJxBC/AAI4cJRV2bfMO8IeGZQYf3WyYgmSg0w==
191+
"@tanstack/react-query@^4.29.25":
192+
version "4.29.25"
193+
resolved "https://registry.yarnpkg.com/@tanstack/react-query/-/react-query-4.29.25.tgz#64df3260b65760fbd3c81ffae23b7b3802c71aa6"
194+
integrity sha512-c1+Ezu+XboYrdAMdusK2fTdRqXPMgPAnyoTrzHOZQqr8Hqz6PNvV9DSKl8agUo6nXX4np7fdWabIprt+838dLg==
195195
dependencies:
196-
"@tanstack/query-core" "4.29.5"
196+
"@tanstack/query-core" "4.29.25"
197197
use-sync-external-store "^1.2.0"
198198

199199
"@types/json5@^0.0.29":
@@ -473,9 +473,9 @@ [email protected]:
473473
integrity sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==
474474

475475
copy-anything@^3.0.2:
476-
version "3.0.3"
477-
resolved "https://registry.yarnpkg.com/copy-anything/-/copy-anything-3.0.3.tgz#206767156f08da0e02efd392f71abcdf79643559"
478-
integrity sha512-fpW2W/BqEzqPp29QS+MwwfisHCQZtiduTe/m8idFo0xbti9fIZ2WVhAsCv4ggFVH3AgCkVdpoOCtQC6gBrdhjw==
476+
version "3.0.5"
477+
resolved "https://registry.yarnpkg.com/copy-anything/-/copy-anything-3.0.5.tgz#2d92dce8c498f790fa7ad16b01a1ae5a45b020a0"
478+
integrity sha512-yCEafptTtb4bk7GLEQoM8KVJpxAfdBJYaXyzQEgQQQgYrZiDp8SJmGKlYza6CYjEDNstAdNdKA3UuoULlEbS6w==
479479
dependencies:
480480
is-what "^4.1.8"
481481

@@ -1348,9 +1348,9 @@ is-weakset@^2.0.1:
13481348
get-intrinsic "^1.1.1"
13491349

13501350
is-what@^4.1.8:
1351-
version "4.1.8"
1352-
resolved "https://registry.yarnpkg.com/is-what/-/is-what-4.1.8.tgz#0e2a8807fda30980ddb2571c79db3d209b14cbe4"
1353-
integrity sha512-yq8gMao5upkPoGEU9LsB2P+K3Kt8Q3fQFCGyNCWOAnJAMzEXVV9drYb0TXr42TTliLLhKIBvulgAXgtLLnwzGA==
1351+
version "4.1.15"
1352+
resolved "https://registry.yarnpkg.com/is-what/-/is-what-4.1.15.tgz#de43a81090417a425942d67b1ae86e7fae2eee0e"
1353+
integrity sha512-uKua1wfy3Yt+YqsD6mTUEa2zSi3G1oPlqTflgaPJ7z63vUGN5pxFpnQfeSLMFnJDEsdvOtkp1rUWkYjB4YfhgA==
13541354

13551355
is-wsl@^2.2.0:
13561356
version "2.2.0"
@@ -1934,9 +1934,9 @@ [email protected]:
19341934
client-only "0.0.1"
19351935

19361936
superjson@^1.10.0:
1937-
version "1.12.2"
1938-
resolved "https://registry.yarnpkg.com/superjson/-/superjson-1.12.2.tgz#072471f1e6add2d95a38b77fef8c7a199d82103a"
1939-
integrity sha512-ugvUo9/WmvWOjstornQhsN/sR9mnGtWGYeTxFuqLb4AiT4QdUavjGFRALCPKWWnAiUJ4HTpytj5e0t5HoMRkXg==
1937+
version "1.13.1"
1938+
resolved "https://registry.yarnpkg.com/superjson/-/superjson-1.13.1.tgz#a0b6ab5d22876f6207fcb9d08b0cb2acad8ee5cd"
1939+
integrity sha512-AVH2eknm9DEd3qvxM4Sq+LTCkSXE2ssfh1t11MHMXyYXFQyQ1HLgVvV+guLTsaQnJU3gnaVo34TohHPulY/wLg==
19401940
dependencies:
19411941
copy-anything "^3.0.2"
19421942

0 commit comments

Comments
 (0)