Skip to content

Commit 3399693

Browse files
TkDodoTkDodo
authored
Merge branch 'alpha' into alpha/fix-5562
2 parents c6dc6bc + cefd080 commit 3399693

79 files changed

Lines changed: 2012 additions & 665 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎babel.config.cjs‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ module.exports = {
3838
'./packages/react-query/**',
3939
'./packages/react-query-devtools/**',
4040
'./packages/react-query-persist-client/**',
41+
'./packages/react-query-next-experimental/**',
4142
],
4243
presets: ['@babel/react'],
4344
},

‎docs/config.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -278,6 +278,10 @@
278278
"label": "Next.js",
279279
"to": "react/examples/react/nextjs"
280280
},
281+
{
282+
"label": "Next.js app with streaming",
283+
"to": "react/examples/react/nextjs-suspense-streaming"
284+
},
281285
{
282286
"label": "React Native",
283287
"to": "react/examples/react/react-native"

‎docs/svelte/reactivity.md‎

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -3,47 +3,47 @@ id: reactivity
33
title: Reactivity
44
---
55

6-
Svelte uses a compiler to build your code which optimises rendering. By default, variables will run once, unless they are referenced in your markup. To be able to react to changes in options you need to use [stores](https://svelte.dev/tutorial/writable-stores).
6+
Svelte uses a compiler to build your code which optimises rendering. By default, components run once, unless they are referenced in your markup. To be able to react to changes in options you need to use [stores](https://svelte.dev/docs/svelte-store).
77

8-
In the below example, the `refetchInterval` option is set from the variable `intervalMs`, which is edited by the input field. However, as the query is not told it should react to changes in `intervalMs`, `refetchInterval` will not change when the input value changes.
8+
In the below example, the `refetchInterval` option is set from the variable `intervalMs`, which is bound to the input field. However, as the query is not able to react to changes in `intervalMs`, `refetchInterval` will not change when the input value changes.
99

1010
```markdown
11-
<script>
11+
<script lang="ts">
1212
import { createQuery } from '@tanstack/svelte-query'
1313

14-
let intervalMs = 1000
15-
1614
const endpoint = 'http://localhost:5173/api/data'
1715

16+
let intervalMs = 1000
17+
1818
const query = createQuery({
1919
queryKey: ['refetch'],
2020
queryFn: async () => await fetch(endpoint).then((r) => r.json()),
2121
refetchInterval: intervalMs,
2222
})
2323
</script>
2424

25-
<input bind:value={intervalMs} type="number" />
25+
<input type="number" bind:value={intervalMs} />
2626
```
2727

28-
To solve this, create a store for the options and use it as input for the query. Update the options store when the value changes and the query will react to the change.
28+
To solve this, we can convert `intervalMs` into a writable store. The query options can then be turned into a derived store, which will be passed into the function with true reactivity.
2929

3030
```markdown
31-
<script>
31+
<script lang="ts">
32+
import { derived, writable } from 'svelte/store'
3233
import { createQuery } from '@tanstack/svelte-query'
3334

3435
const endpoint = 'http://localhost:5173/api/data'
3536

36-
const queryOptions = writable({
37-
queryKey: ['refetch'],
38-
queryFn: async () => await fetch(endpoint).then((r) => r.json()),
39-
refetchInterval: 1000,
40-
})
41-
const query = createQuery(queryOptions)
37+
const intervalMs = writable(1000)
4238

43-
function updateRefetchInterval(event) {
44-
$queryOptions.refetchInterval = event.target.valueAsNumber
45-
}
39+
const query = createQuery(
40+
derived(intervalMs, ($intervalMs) => ({
41+
queryKey: ['refetch'],
42+
queryFn: async () => await fetch(endpoint).then((r) => r.json()),
43+
refetchInterval: $intervalMs,
44+
}))
45+
)
4646
</script>
4747

48-
<input type="number" on:input={updateRefetchInterval} />
48+
<input type="number" bind:value={$intervalMs} />
4949
```

‎examples/react/nextjs-suspense-streaming/next.config.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
/** @type {import('next').NextConfig} */
2+
const nextConfig = {
3+
eslint: {
4+
ignoreDuringBuilds: true,
5+
},
6+
experimental: {
7+
appDir: true,
8+
serverActions: true,
9+
},
10+
webpack: (config) => {
11+
if (config.name === 'server') config.optimization.concatenateModules = false
12+
13+
return config
14+
},
15+
}
16+
17+
module.exports = nextConfig

‎examples/react/nextjs-suspense-streaming/package.json‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
{
2+
"name": "@tanstack/query-example-nextjs-suspense-streaming",
3+
"private": true,
4+
"license": "MIT",
5+
"scripts": {
6+
"dev": "next dev",
7+
"build": "next build",
8+
"start": "next start"
9+
},
10+
"dependencies": {
11+
"@tanstack/react-query": "^5.0.0-alpha.68",
12+
"@tanstack/react-query-devtools": "^5.0.0-alpha.68",
13+
"@tanstack/react-query-next-experimental": "^5.0.0-alpha.80",
14+
"next": "^13.4.4",
15+
"react": "^18.2.0",
16+
"react-dom": "^18.2.0",
17+
"superjson": "^1.12.3"
18+
},
19+
"devDependencies": {
20+
"@types/node": "20.2.5",
21+
"@types/react": "18.2.8",
22+
"typescript": "5.1.3"
23+
}
24+
}

‎examples/react/nextjs-suspense-streaming/src/app/api/wait/route.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { NextResponse } from 'next/server'
2+
3+
export async function GET(request: Request) {
4+
const { searchParams } = new URL(request.url)
5+
const wait = Number(searchParams.get('wait'))
6+
7+
await new Promise((resolve) => setTimeout(resolve, wait))
8+
9+
return NextResponse.json(`waited ${wait}ms`)
10+
}

‎examples/react/nextjs-suspense-streaming/src/app/layout.tsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { Providers } from './providers'
2+
3+
export const metadata = {
4+
title: 'Next.js',
5+
description: 'Generated by Next.js',
6+
}
7+
8+
export default function RootLayout({
9+
children,
10+
}: {
11+
children: React.ReactNode
12+
}) {
13+
return (
14+
<html lang="en">
15+
<body>
16+
<Providers>{children}</Providers>
17+
</body>
18+
</html>
19+
)
20+
}

‎examples/react/nextjs-suspense-streaming/src/app/page.tsx‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
'use client'
2+
import { useQuery } from '@tanstack/react-query'
3+
import { Suspense } from 'react'
4+
5+
// export const runtime = "edge"; // 'nodejs' (default) | 'edge'
6+
7+
function getBaseURL() {
8+
if (typeof window !== 'undefined') {
9+
return ''
10+
}
11+
if (process.env.VERCEL_URL) {
12+
return `https://${process.env.VERCEL_URL}`
13+
}
14+
return 'http://localhost:3000'
15+
}
16+
const baseUrl = getBaseURL()
17+
function useWaitQuery(props: { wait: number }) {
18+
const query = useQuery({
19+
queryKey: ['wait', props.wait],
20+
queryFn: async () => {
21+
const path = `/api/wait?wait=${props.wait}`
22+
const url = baseUrl + path
23+
24+
console.log('fetching', url)
25+
const res: string = await (
26+
await fetch(url, {
27+
cache: 'no-store',
28+
})
29+
).json()
30+
return res
31+
},
32+
suspense: true,
33+
})
34+
35+
return [query.data as string, query] as const
36+
}
37+
38+
function MyComponent(props: { wait: number }) {
39+
const [data] = useWaitQuery(props)
40+
41+
return <div>result: {data}</div>
42+
}
43+
44+
export default function MyPage() {
45+
return (
46+
<>
47+
<Suspense fallback={<div>waiting 100....</div>}>
48+
<MyComponent wait={100} />
49+
</Suspense>
50+
<Suspense fallback={<div>waiting 200....</div>}>
51+
<MyComponent wait={200} />
52+
</Suspense>
53+
<Suspense fallback={<div>waiting 300....</div>}>
54+
<MyComponent wait={300} />
55+
</Suspense>
56+
<Suspense fallback={<div>waiting 400....</div>}>
57+
<MyComponent wait={400} />
58+
</Suspense>
59+
<Suspense fallback={<div>waiting 500....</div>}>
60+
<MyComponent wait={500} />
61+
</Suspense>
62+
<Suspense fallback={<div>waiting 600....</div>}>
63+
<MyComponent wait={600} />
64+
</Suspense>
65+
<Suspense fallback={<div>waiting 700....</div>}>
66+
<MyComponent wait={700} />
67+
</Suspense>
68+
69+
<fieldset>
70+
<legend>
71+
combined <code>Suspense</code>-container
72+
</legend>
73+
<Suspense
74+
fallback={
75+
<>
76+
<div>waiting 800....</div>
77+
<div>waiting 900....</div>
78+
<div>waiting 1000....</div>
79+
</>
80+
}
81+
>
82+
<MyComponent wait={800} />
83+
<MyComponent wait={900} />
84+
<MyComponent wait={1000} />
85+
</Suspense>
86+
</fieldset>
87+
</>
88+
)
89+
}

‎examples/react/nextjs-suspense-streaming/src/app/providers.tsx‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
// app/providers.jsx
2+
'use client'
3+
4+
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
5+
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
6+
import React from 'react'
7+
import { ReactQueryStreamedHydration } from '@tanstack/react-query-next-experimental'
8+
9+
export function Providers(props: { children: React.ReactNode }) {
10+
const [queryClient] = React.useState(
11+
() =>
12+
new QueryClient({
13+
defaultOptions: {
14+
queries: {
15+
staleTime: 5 * 1000,
16+
},
17+
},
18+
}),
19+
)
20+
21+
return (
22+
<QueryClientProvider client={queryClient}>
23+
<ReactQueryStreamedHydration>
24+
{props.children}
25+
</ReactQueryStreamedHydration>
26+
<ReactQueryDevtools initialIsOpen={false} />
27+
</QueryClientProvider>
28+
)
29+
}

‎examples/react/nextjs-suspense-streaming/tsconfig.json‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{
2+
"compilerOptions": {
3+
"target": "es5",
4+
"lib": ["dom", "dom.iterable", "esnext"],
5+
"allowJs": true,
6+
"skipLibCheck": true,
7+
"strict": true,
8+
"forceConsistentCasingInFileNames": true,
9+
"noEmit": true,
10+
"esModuleInterop": true,
11+
"module": "esnext",
12+
"moduleResolution": "node",
13+
"resolveJsonModule": true,
14+
"isolatedModules": true,
15+
"jsx": "preserve",
16+
"incremental": true,
17+
"plugins": [
18+
{
19+
"name": "next"
20+
}
21+
]
22+
},
23+
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
24+
"exclude": ["node_modules"]
25+
}

0 commit comments

Comments
 (0)