Merge branch 'alpha' into alpha/fix-5562

TanStack · Jul 14, 2023 · 3399693 · 3399693
2 parents c6dc6bc + cefd080
commit 3399693
Show file tree

Hide file tree

Showing 79 changed files with 2,012 additions and 665 deletions.
diff --git a/babel.config.cjs b/babel.config.cjs
@@ -38,6 +38,7 @@ module.exports = {
         './packages/react-query/**',
         './packages/react-query-devtools/**',
         './packages/react-query-persist-client/**',
+        './packages/react-query-next-experimental/**',
       ],
       presets: ['@babel/react'],
     },

diff --git a/docs/config.json b/docs/config.json
@@ -278,6 +278,10 @@
               "label": "Next.js",
               "to": "react/examples/react/nextjs"
             },
+            {
+              "label": "Next.js app with streaming",
+              "to": "react/examples/react/nextjs-suspense-streaming"
+            },
             {
               "label": "React Native",
               "to": "react/examples/react/react-native"

diff --git a/docs/svelte/reactivity.md b/docs/svelte/reactivity.md
@@ -3,47 +3,47 @@ id: reactivity
 title: Reactivity
 ---
 
-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).
+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).
 
-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.
+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.
 
 ```markdown
-<script>
+<script lang="ts">
   import { createQuery } from '@tanstack/svelte-query'
 
-  let intervalMs = 1000
-
   const endpoint = 'http://localhost:5173/api/data'
 
+  let intervalMs = 1000
+
   const query = createQuery({
     queryKey: ['refetch'],
     queryFn: async () => await fetch(endpoint).then((r) => r.json()),
     refetchInterval: intervalMs,
   })
 </script>
 
-<input bind:value={intervalMs} type="number" />
+<input type="number" bind:value={intervalMs} />
 ```
 
-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.
+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.
 
 ```markdown
-<script>
+<script lang="ts">
+  import { derived, writable } from 'svelte/store'
   import { createQuery } from '@tanstack/svelte-query'
 
   const endpoint = 'http://localhost:5173/api/data'
 
-  const queryOptions = writable({
-    queryKey: ['refetch'],
-    queryFn: async () => await fetch(endpoint).then((r) => r.json()),
-    refetchInterval: 1000,
-  })
-  const query = createQuery(queryOptions)
+  const intervalMs = writable(1000)
 
-  function updateRefetchInterval(event) {
-    $queryOptions.refetchInterval = event.target.valueAsNumber
-  }
+  const query = createQuery(
+    derived(intervalMs, ($intervalMs) => ({
+      queryKey: ['refetch'],
+      queryFn: async () => await fetch(endpoint).then((r) => r.json()),
+      refetchInterval: $intervalMs,
+    }))
+  )
 </script>
 
-<input type="number" on:input={updateRefetchInterval} />
+<input type="number" bind:value={$intervalMs} />
 ```
diff --git a/examples/react/nextjs-suspense-streaming/next.config.js b/examples/react/nextjs-suspense-streaming/next.config.js
@@ -0,0 +1,17 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
+  experimental: {
+    appDir: true,
+    serverActions: true,
+  },
+  webpack: (config) => {
+    if (config.name === 'server') config.optimization.concatenateModules = false
+
+    return config
+  },
+}
+
+module.exports = nextConfig
diff --git a/examples/react/nextjs-suspense-streaming/package.json b/examples/react/nextjs-suspense-streaming/package.json
@@ -0,0 +1,24 @@
+{
+  "name": "@tanstack/query-example-nextjs-suspense-streaming",
+  "private": true,
+  "license": "MIT",
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "@tanstack/react-query": "^5.0.0-alpha.68",
+    "@tanstack/react-query-devtools": "^5.0.0-alpha.68",
+    "@tanstack/react-query-next-experimental": "^5.0.0-alpha.80",
+    "next": "^13.4.4",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "superjson": "^1.12.3"
+  },
+  "devDependencies": {
+    "@types/node": "20.2.5",
+    "@types/react": "18.2.8",
+    "typescript": "5.1.3"
+  }
+}
diff --git a/examples/react/nextjs-suspense-streaming/src/app/api/wait/route.ts b/examples/react/nextjs-suspense-streaming/src/app/api/wait/route.ts
@@ -0,0 +1,10 @@
+import { NextResponse } from 'next/server'
+
+export async function GET(request: Request) {
+  const { searchParams } = new URL(request.url)
+  const wait = Number(searchParams.get('wait'))
+
+  await new Promise((resolve) => setTimeout(resolve, wait))
+
+  return NextResponse.json(`waited ${wait}ms`)
+}
diff --git a/examples/react/nextjs-suspense-streaming/src/app/layout.tsx b/examples/react/nextjs-suspense-streaming/src/app/layout.tsx
@@ -0,0 +1,20 @@
+import { Providers } from './providers'
+
+export const metadata = {
+  title: 'Next.js',
+  description: 'Generated by Next.js',
+}
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <body>
+        <Providers>{children}</Providers>
+      </body>
+    </html>
+  )
+}
diff --git a/examples/react/nextjs-suspense-streaming/src/app/page.tsx b/examples/react/nextjs-suspense-streaming/src/app/page.tsx
@@ -0,0 +1,89 @@
+'use client'
+import { useQuery } from '@tanstack/react-query'
+import { Suspense } from 'react'
+
+// export const runtime = "edge"; // 'nodejs' (default) | 'edge'
+
+function getBaseURL() {
+  if (typeof window !== 'undefined') {
+    return ''
+  }
+  if (process.env.VERCEL_URL) {
+    return `https://${process.env.VERCEL_URL}`
+  }
+  return 'http://localhost:3000'
+}
+const baseUrl = getBaseURL()
+function useWaitQuery(props: { wait: number }) {
+  const query = useQuery({
+    queryKey: ['wait', props.wait],
+    queryFn: async () => {
+      const path = `/api/wait?wait=${props.wait}`
+      const url = baseUrl + path
+
+      console.log('fetching', url)
+      const res: string = await (
+        await fetch(url, {
+          cache: 'no-store',
+        })
+      ).json()
+      return res
+    },
+    suspense: true,
+  })
+
+  return [query.data as string, query] as const
+}
+
+function MyComponent(props: { wait: number }) {
+  const [data] = useWaitQuery(props)
+
+  return <div>result: {data}</div>
+}
+
+export default function MyPage() {
+  return (
+    <>
+      <Suspense fallback={<div>waiting 100....</div>}>
+        <MyComponent wait={100} />
+      </Suspense>
+      <Suspense fallback={<div>waiting 200....</div>}>
+        <MyComponent wait={200} />
+      </Suspense>
+      <Suspense fallback={<div>waiting 300....</div>}>
+        <MyComponent wait={300} />
+      </Suspense>
+      <Suspense fallback={<div>waiting 400....</div>}>
+        <MyComponent wait={400} />
+      </Suspense>
+      <Suspense fallback={<div>waiting 500....</div>}>
+        <MyComponent wait={500} />
+      </Suspense>
+      <Suspense fallback={<div>waiting 600....</div>}>
+        <MyComponent wait={600} />
+      </Suspense>
+      <Suspense fallback={<div>waiting 700....</div>}>
+        <MyComponent wait={700} />
+      </Suspense>
+
+      <fieldset>
+        <legend>
+          combined <code>Suspense</code>-container
+        </legend>
+        <Suspense
+          fallback={
+            <>
+              <div>waiting 800....</div>
+              <div>waiting 900....</div>
+              <div>waiting 1000....</div>
+            </>
+          }
+        >
+          <MyComponent wait={800} />
+          <MyComponent wait={900} />
+          <MyComponent wait={1000} />
+        </Suspense>
+      </fieldset>
+    </>
+  )
+}
diff --git a/examples/react/nextjs-suspense-streaming/src/app/providers.tsx b/examples/react/nextjs-suspense-streaming/src/app/providers.tsx
@@ -0,0 +1,29 @@
+// app/providers.jsx
+'use client'
+
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
+import React from 'react'
+import { ReactQueryStreamedHydration } from '@tanstack/react-query-next-experimental'
+
+export function Providers(props: { children: React.ReactNode }) {
+  const [queryClient] = React.useState(
+    () =>
+      new QueryClient({
+        defaultOptions: {
+          queries: {
+            staleTime: 5 * 1000,
+          },
+        },
+      }),
+  )
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <ReactQueryStreamedHydration>
+        {props.children}
+      </ReactQueryStreamedHydration>
+      <ReactQueryDevtools initialIsOpen={false} />
+    </QueryClientProvider>
+  )
+}
diff --git a/examples/react/nextjs-suspense-streaming/tsconfig.json b/examples/react/nextjs-suspense-streaming/tsconfig.json
@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}
diff --git a/examples/svelte/auto-refetching/package.json b/examples/svelte/auto-refetching/package.json
@@ -15,8 +15,8 @@
   "devDependencies": {
     "@sveltejs/adapter-auto": "^2.1.0",
     "@sveltejs/kit": "^1.19.0",
-    "svelte": "^3.54.0",
-    "svelte-check": "^3.4.3",
+    "svelte": "^4.0.0",
+    "svelte-check": "^3.4.4",
     "tslib": "^2.5.2",
     "typescript": "^5.0.4",
     "vite": "^4.2.0"

diff --git a/examples/svelte/basic/package.json b/examples/svelte/basic/package.json
@@ -15,8 +15,8 @@
   "devDependencies": {
     "@sveltejs/adapter-auto": "^2.1.0",
     "@sveltejs/kit": "^1.19.0",
-    "svelte": "^3.54.0",
-    "svelte-check": "^3.4.3",
+    "svelte": "^4.0.0",
+    "svelte-check": "^3.4.4",
     "tslib": "^2.5.2",
     "typescript": "^5.0.4",
     "vite": "^4.2.0"

diff --git a/examples/svelte/load-more-infinite-scroll/package.json b/examples/svelte/load-more-infinite-scroll/package.json
@@ -15,8 +15,8 @@
   "devDependencies": {
     "@sveltejs/adapter-auto": "^2.1.0",
     "@sveltejs/kit": "^1.19.0",
-    "svelte": "^3.54.0",
-    "svelte-check": "^3.4.3",
+    "svelte": "^4.0.0",
+    "svelte-check": "^3.4.4",
     "tslib": "^2.5.2",
     "typescript": "^5.0.4",
     "vite": "^4.2.0"

diff --git a/examples/svelte/optimistic-updates-typescript/package.json b/examples/svelte/optimistic-updates-typescript/package.json
@@ -15,8 +15,8 @@
   "devDependencies": {
     "@sveltejs/adapter-auto": "^2.1.0",
     "@sveltejs/kit": "^1.19.0",
-    "svelte": "^3.54.0",
-    "svelte-check": "^3.4.3",
+    "svelte": "^4.0.0",
+    "svelte-check": "^3.4.4",
     "tslib": "^2.5.2",
     "typescript": "^5.0.4",
     "vite": "^4.2.0"

diff --git a/examples/svelte/playground/package.json b/examples/svelte/playground/package.json
@@ -15,8 +15,8 @@
   "devDependencies": {
     "@sveltejs/adapter-auto": "^2.1.0",
     "@sveltejs/kit": "^1.19.0",
-    "svelte": "^3.54.0",
-    "svelte-check": "^3.4.3",
+    "svelte": "^4.0.0",
+    "svelte-check": "^3.4.4",
     "tslib": "^2.5.2",
     "typescript": "^5.0.4",
     "vite": "^4.2.0"

diff --git a/examples/svelte/simple/package.json b/examples/svelte/simple/package.json
@@ -13,10 +13,10 @@
     "@tanstack/svelte-query-devtools": "^5.0.0-alpha.39"
   },
   "devDependencies": {
-    "@sveltejs/vite-plugin-svelte": "^2.4.0",
+    "@sveltejs/vite-plugin-svelte": "^2.4.2",
     "@tsconfig/svelte": "^4.0.1",
-    "svelte": "^3.54.0",
-    "svelte-check": "^3.4.3",
+    "svelte": "^4.0.0",
+    "svelte-check": "^3.4.4",
     "tslib": "^2.5.2",
     "typescript": "^5.0.4",
     "vite": "^4.2.0"

diff --git a/examples/svelte/ssr/package.json b/examples/svelte/ssr/package.json
@@ -15,8 +15,8 @@
   "devDependencies": {
     "@sveltejs/adapter-auto": "^2.1.0",
     "@sveltejs/kit": "^1.19.0",
-    "svelte": "^3.54.0",
-    "svelte-check": "^3.4.3",
+    "svelte": "^4.0.0",
+    "svelte-check": "^3.4.4",
     "tslib": "^2.5.2",
     "typescript": "^5.0.4",
     "vite": "^4.2.0"

diff --git a/examples/svelte/star-wars/package.json b/examples/svelte/star-wars/package.json
@@ -17,8 +17,8 @@
     "@sveltejs/kit": "^1.19.0",
     "autoprefixer": "^10.4.14",
     "postcss": "^8.4.23",
-    "svelte": "^3.54.0",
-    "svelte-check": "^3.4.3",
+    "svelte": "^4.0.0",
+    "svelte-check": "^3.4.4",
     "tailwindcss": "^3.3.2",
     "tslib": "^2.5.2",
     "typescript": "^5.0.4",