diff --git a/docs/config.json b/docs/config.json index b75eab240e..74e1167323 100644 --- a/docs/config.json +++ b/docs/config.json @@ -849,9 +849,13 @@ "to": "framework/react/examples/rick-morty" }, { - "label": "Next.js", + "label": "Next.js Pages", "to": "framework/react/examples/nextjs" }, + { + "label": "Next.js app with prefetching", + "to": "framework/react/examples/nextjs-app-prefetching" + }, { "label": "Next.js app with streaming", "to": "framework/react/examples/nextjs-suspense-streaming" diff --git a/docs/framework/react/guides/advanced-ssr.md b/docs/framework/react/guides/advanced-ssr.md index 6af0647c55..33267b084a 100644 --- a/docs/framework/react/guides/advanced-ssr.md +++ b/docs/framework/react/guides/advanced-ssr.md @@ -52,7 +52,7 @@ function getQueryClient() { return makeQueryClient() } else { // Browser: make a new query client if we don't already have one - // This is very important so we don't re-make a new client if React + // This is very important, so we don't re-make a new client if React // suspends during the initial render. This may not be needed if we // have a suspense boundary BELOW the creation of the query client if (!browserQueryClient) browserQueryClient = makeQueryClient() @@ -354,9 +354,80 @@ The Next.js app router automatically streams any part of the application that is With the prefetching patterns described above, React Query is perfectly compatible with this form of streaming. As the data for each Suspense boundary resolves, Next.js can render and stream the finished content to the browser. This works even if you are using `useQuery` as outlined above because the suspending actually happens when you `await` the prefetch. -Note that right now, you have to await all prefetches for this to work. This means all prefetches are considered critical content and will block that Suspense boundary. +As of React Query v5.40.0, you don't have to `await` all prefetches for this to work, as `pending` Queries can also be dehydrated and sent to the client. This lets you kick off prefetches as early as possible without letting them block an entire Suspense boundary, and streams the _data_ to the client as the query finishes. This can be useful for example if you want to prefetch some content that is only visible after some user interaction, or say if you want to `await` and render the first page of an infinite query, but start prefetching page 2 without blocking rendering. -As an aside, in the future it might be possible to skip the await for "optional" prefetches that are not critical for this Suspense boundary. This would let you kick off prefetches as early as possible without letting them block an entire Suspense boundary, and streaming the _data_ to the client as the query finishes. This could be useful for example if you want to prefetch some content that is only visible after some user interaction, or say if you want to await and render the first page of an infinite query, but start prefetching page 2 without blocking rendering. +To make this work, we have to instruct the `queryClient` to also `dehydrate` pending Queries. We can do this globally, or by passing that option directly to `hydrate`: + +```tsx +// app/get-query-client.ts +import { QueryClient, defaultShouldDehydrateQuery } from '@tanstack/react-query' + +function makeQueryClient() { + return new QueryClient({ + defaultOptions: { + queries: { + staleTime: 60 * 1000, + }, + dehydrate: { + // per default, only successful Queries are included, + // this includes pending Queries as well + shouldDehydrateQuery: (query) => + defaultShouldDehydrateQuery(query) || + query.state.status === 'pending', + }, + }, + }) +} +``` + +> Note: This works in NextJs and Server Components because React can serialize Promises over the wire when you pass them down to Client Components. + +Then, all we need to do is provide a `HydrationBoundary`, but we don't need to `await` prefetches anymore: + +```tsx +// app/posts/page.jsx +import { + dehydrate, + HydrationBoundary, + QueryClient, +} from '@tanstack/react-query' +import { getQueryClient } from './get-query-client' +import Posts from './posts' + +// the function doesn't need to be `async` because we don't `await` anything +export default function PostsPage() { + const queryClient = getQueryClient() + + // look ma, no await + queryClient.prefetchQuery({ + queryKey: ['posts'], + queryFn: getPosts, + }) + + return ( + + + + ) +} +``` + +On the client, the Promise will be put into the QueryCache for us. That means we can now call `useSuspenseQuery` inside the `Posts` component to "use" that Promise (which was created on the Server): + +```tsx +// app/posts/posts.tsx +'use client' + +export default function Posts() { + const { data } = useSuspenseQuery({ queryKey: ['posts'], queryFn: getPosts }) + + // ... +} +``` + +> Note that you could also `useQuery` instead of `useSuspenseQuery`, and the Promise would still be picked up correctly. However, NextJs won't suspend in that case and the component will render in the `pending` status, which also opts out of server rendering the content. + +For more information, check out the [Next.js App with Prefetching Example](../../examples/nextjs-app-prefetching). ## Experimental streaming without prefetching in Next.js @@ -394,8 +465,8 @@ function getQueryClient() { return makeQueryClient() } else { // Browser: make a new query client if we don't already have one - // This is very important so we don't re-make a new client if React - // supsends during the initial render. This may not be needed if we + // This is very important, so we don't re-make a new client if React + // suspends during the initial render. This may not be needed if we // have a suspense boundary BELOW the creation of the query client if (!browserQueryClient) browserQueryClient = makeQueryClient() return browserQueryClient diff --git a/docs/framework/react/guides/suspense.md b/docs/framework/react/guides/suspense.md index e602ff5097..2c7a8bc97b 100644 --- a/docs/framework/react/guides/suspense.md +++ b/docs/framework/react/guides/suspense.md @@ -142,8 +142,8 @@ function getQueryClient() { return makeQueryClient() } else { // Browser: make a new query client if we don't already have one - // This is very important so we don't re-make a new client if React - // supsends during the initial render. This may not be needed if we + // This is very important, so we don't re-make a new client if React + // suspends during the initial render. This may not be needed if we // have a suspense boundary BELOW the creation of the query client if (!browserQueryClient) browserQueryClient = makeQueryClient() return browserQueryClient diff --git a/docs/framework/react/reference/hydration.md b/docs/framework/react/reference/hydration.md index f66e23a1e0..990481f4f8 100644 --- a/docs/framework/react/reference/hydration.md +++ b/docs/framework/react/reference/hydration.md @@ -45,7 +45,7 @@ const dehydratedState = dehydrate(queryClient, { - You **should not** rely on the exact format of this response, it is not part of the public API and can change at any time - This result is not in serialized form, you need to do that yourself if desired -### limitations +### Limitations Some storage systems (such as browser [Web Storage API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API)) require values to be JSON serializable. If you need to dehydrate values that are not automatically serializable to JSON (like `Error` or `undefined`), you have to serialize them for yourself. Since only successful queries are included per default, to also include `Errors`, you have to provide `shouldDehydrateQuery`, e.g.: @@ -88,7 +88,7 @@ hydrate(queryClient, dehydratedState, options) ### Limitations -If the queries included in dehydration already exist in the queryCache, `hydrate` does not overwrite them and they will be **silently** discarded. +If the queries you're trying to hydrate already exist in the queryCache, `hydrate` will only overwrite them if the data is newer than the data present in the cache. Otherwise, it will **not** get applied. [//]: # 'HydrationBoundary' @@ -104,6 +104,8 @@ function App() { } ``` +> Note: Only `queries` can be dehydrated with an `HydrationBoundary`. + **Options** - `state: DehydratedState` diff --git a/docs/reference/QueryClient.md b/docs/reference/QueryClient.md index d7e1a25442..cf00006fd4 100644 --- a/docs/reference/QueryClient.md +++ b/docs/reference/QueryClient.md @@ -62,6 +62,7 @@ Its available methods are: - `defaultOptions?: DefaultOptions` - Optional - Define defaults for all queries and mutations using this queryClient. + - You can also define defaults to be used for [hydration](../../framework/react/reference/hydration.md) ## `queryClient.fetchQuery` diff --git a/examples/react/nextjs-app-prefetching/.eslintrc.cjs b/examples/react/nextjs-app-prefetching/.eslintrc.cjs new file mode 100644 index 0000000000..cb40aee1b4 --- /dev/null +++ b/examples/react/nextjs-app-prefetching/.eslintrc.cjs @@ -0,0 +1,9 @@ +/** @type {import('eslint').Linter.Config} */ +module.exports = { + extends: ['plugin:react/jsx-runtime', 'plugin:react-hooks/recommended'], + settings: { + react: { + version: 'detect', + }, + }, +} diff --git a/examples/react/nextjs-app-prefetching/.gitignore b/examples/react/nextjs-app-prefetching/.gitignore new file mode 100644 index 0000000000..8f322f0d8f --- /dev/null +++ b/examples/react/nextjs-app-prefetching/.gitignore @@ -0,0 +1,35 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/.pnp +.pnp.js + +# testing +/coverage + +# next.js +/.next/ +/out/ + +# production +/build + +# misc +.DS_Store +*.pem + +# debug +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# local env files +.env*.local + +# vercel +.vercel + +# typescript +*.tsbuildinfo +next-env.d.ts diff --git a/examples/react/nextjs-app-prefetching/README.md b/examples/react/nextjs-app-prefetching/README.md new file mode 100644 index 0000000000..f4da3c4c1c --- /dev/null +++ b/examples/react/nextjs-app-prefetching/README.md @@ -0,0 +1,34 @@ +This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). + +## Getting Started + +First, run the development server: + +```bash +npm run dev +# or +yarn dev +# or +pnpm dev +``` + +Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. + +You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file. + +This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font. + +## Learn More + +To learn more about Next.js, take a look at the following resources: + +- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. +- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. + +You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! + +## Deploy on Vercel + +The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. + +Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. diff --git a/examples/react/nextjs-app-prefetching/app/favicon.ico b/examples/react/nextjs-app-prefetching/app/favicon.ico new file mode 100644 index 0000000000..718d6fea48 Binary files /dev/null and b/examples/react/nextjs-app-prefetching/app/favicon.ico differ diff --git a/examples/react/nextjs-app-prefetching/app/get-query-client.ts b/examples/react/nextjs-app-prefetching/app/get-query-client.ts new file mode 100644 index 0000000000..af725f2a96 --- /dev/null +++ b/examples/react/nextjs-app-prefetching/app/get-query-client.ts @@ -0,0 +1,33 @@ +import { QueryClient, defaultShouldDehydrateQuery } from '@tanstack/react-query' + +function makeQueryClient() { + return new QueryClient({ + defaultOptions: { + queries: { + staleTime: 60 * 1000, + }, + dehydrate: { + // include pending queries in dehydration + shouldDehydrateQuery: (query) => + defaultShouldDehydrateQuery(query) || + query.state.status === 'pending', + }, + }, + }) +} + +let browserQueryClient: QueryClient | undefined = undefined + +export function getQueryClient() { + if (typeof window === 'undefined') { + // Server: always make a new query client + return makeQueryClient() + } else { + // Browser: make a new query client if we don't already have one + // This is very important, so we don't re-make a new client if React + // suspends during the initial render. This may not be needed if we + // have a suspense boundary BELOW the creation of the query client + if (!browserQueryClient) browserQueryClient = makeQueryClient() + return browserQueryClient + } +} diff --git a/examples/react/nextjs-app-prefetching/app/layout.tsx b/examples/react/nextjs-app-prefetching/app/layout.tsx new file mode 100644 index 0000000000..eec241445e --- /dev/null +++ b/examples/react/nextjs-app-prefetching/app/layout.tsx @@ -0,0 +1,22 @@ +import Providers from './providers' +import type React from 'react' +import type { Metadata } from 'next' + +export const metadata: Metadata = { + title: 'Create Next App', + description: 'Generated by create next app', +} + +export default function RootLayout({ + children, +}: { + children: React.ReactNode +}) { + return ( + + + {children} + + + ) +} diff --git a/examples/react/nextjs-app-prefetching/app/page.tsx b/examples/react/nextjs-app-prefetching/app/page.tsx new file mode 100644 index 0000000000..fc1113beac --- /dev/null +++ b/examples/react/nextjs-app-prefetching/app/page.tsx @@ -0,0 +1,20 @@ +import React from 'react' +import { HydrationBoundary, dehydrate } from '@tanstack/react-query' +import { pokemonOptions } from '@/app/pokemon' +import { getQueryClient } from '@/app/get-query-client' +import { PokemonInfo } from './pokemon-info' + +export default function Home() { + const queryClient = getQueryClient() + + void queryClient.prefetchQuery(pokemonOptions) + + return ( +
+

Pokemon Info

+ + + +
+ ) +} diff --git a/examples/react/nextjs-app-prefetching/app/pokemon-info.tsx b/examples/react/nextjs-app-prefetching/app/pokemon-info.tsx new file mode 100644 index 0000000000..6490f6f339 --- /dev/null +++ b/examples/react/nextjs-app-prefetching/app/pokemon-info.tsx @@ -0,0 +1,18 @@ +'use client' + +import React from 'react' +import { useSuspenseQuery } from '@tanstack/react-query' +import { pokemonOptions } from '@/app/pokemon' + +export function PokemonInfo() { + const { data } = useSuspenseQuery(pokemonOptions) + + return ( +
+
+ {data.name} +

I'm {data.name}

+
+
+ ) +} diff --git a/examples/react/nextjs-app-prefetching/app/pokemon.ts b/examples/react/nextjs-app-prefetching/app/pokemon.ts new file mode 100644 index 0000000000..6e4c780ea8 --- /dev/null +++ b/examples/react/nextjs-app-prefetching/app/pokemon.ts @@ -0,0 +1,10 @@ +import { queryOptions } from '@tanstack/react-query' + +export const pokemonOptions = queryOptions({ + queryKey: ['pokemon'], + queryFn: async () => { + const response = await fetch('https://pokeapi.co/api/v2/pokemon/25') + + return response.json() + }, +}) diff --git a/examples/react/nextjs-app-prefetching/app/providers.tsx b/examples/react/nextjs-app-prefetching/app/providers.tsx new file mode 100644 index 0000000000..f5098b4d0a --- /dev/null +++ b/examples/react/nextjs-app-prefetching/app/providers.tsx @@ -0,0 +1,16 @@ +'use client' +import { QueryClientProvider } from '@tanstack/react-query' +import { ReactQueryDevtools } from '@tanstack/react-query-devtools' +import { getQueryClient } from '@/app/get-query-client' +import type * as React from 'react' + +export default function Providers({ children }: { children: React.ReactNode }) { + const queryClient = getQueryClient() + + return ( + + {children} + + + ) +} diff --git a/examples/react/nextjs-app-prefetching/next.config.js b/examples/react/nextjs-app-prefetching/next.config.js new file mode 100644 index 0000000000..8d2a9bf37a --- /dev/null +++ b/examples/react/nextjs-app-prefetching/next.config.js @@ -0,0 +1,8 @@ +/** @type {import('next').NextConfig} */ +const nextConfig = { + eslint: { + ignoreDuringBuilds: true, + }, +} + +module.exports = nextConfig diff --git a/examples/react/nextjs-app-prefetching/package.json b/examples/react/nextjs-app-prefetching/package.json new file mode 100644 index 0000000000..bb01c042a2 --- /dev/null +++ b/examples/react/nextjs-app-prefetching/package.json @@ -0,0 +1,23 @@ +{ + "name": "nextjs-app-prefetching", + "private": true, + "scripts": { + "dev": "next dev", + "build": "next build", + "start": "next start", + "test:types": "tsc" + }, + "dependencies": { + "@tanstack/react-query": "^5.39.0", + "@tanstack/react-query-devtools": "^5.39.0", + "next": "^15.0.0-rc.0", + "react": "^19.0.0-rc-4c2e457c7c-20240522", + "react-dom": "^19.0.0-rc-4c2e457c7c-20240522" + }, + "devDependencies": { + "@types/node": "^20.12.12", + "@types/react": "npm:types-react@rc", + "@types/react-dom": "npm:types-react-dom@rc", + "typescript": "5.3.3" + } +} diff --git a/examples/react/nextjs-app-prefetching/tsconfig.json b/examples/react/nextjs-app-prefetching/tsconfig.json new file mode 100644 index 0000000000..e3ea9649f2 --- /dev/null +++ b/examples/react/nextjs-app-prefetching/tsconfig.json @@ -0,0 +1,34 @@ +{ + "compilerOptions": { + "target": "es5", + "lib": ["dom", "dom.iterable", "esnext"], + "allowJs": true, + "skipLibCheck": true, + "strict": true, + "forceConsistentCasingInFileNames": true, + "noEmit": true, + "esModuleInterop": true, + "module": "esnext", + "moduleResolution": "bundler", + "resolveJsonModule": true, + "isolatedModules": true, + "jsx": "preserve", + "incremental": true, + "plugins": [ + { + "name": "next" + } + ], + "paths": { + "@/*": ["./*"] + } + }, + "include": [ + "next-env.d.ts", + "**/*.ts", + "**/*.tsx", + ".next/types/**/*.ts", + ".eslintrc.cjs" + ], + "exclude": ["node_modules"] +} diff --git a/integrations/react-next-15/.eslintrc.cjs b/integrations/react-next-15/.eslintrc.cjs new file mode 100644 index 0000000000..cb40aee1b4 --- /dev/null +++ b/integrations/react-next-15/.eslintrc.cjs @@ -0,0 +1,9 @@ +/** @type {import('eslint').Linter.Config} */ +module.exports = { + extends: ['plugin:react/jsx-runtime', 'plugin:react-hooks/recommended'], + settings: { + react: { + version: 'detect', + }, + }, +} diff --git a/integrations/react-next-15/.gitignore b/integrations/react-next-15/.gitignore new file mode 100644 index 0000000000..8f322f0d8f --- /dev/null +++ b/integrations/react-next-15/.gitignore @@ -0,0 +1,35 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/.pnp +.pnp.js + +# testing +/coverage + +# next.js +/.next/ +/out/ + +# production +/build + +# misc +.DS_Store +*.pem + +# debug +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# local env files +.env*.local + +# vercel +.vercel + +# typescript +*.tsbuildinfo +next-env.d.ts diff --git a/integrations/react-next-15/README.md b/integrations/react-next-15/README.md new file mode 100644 index 0000000000..f4da3c4c1c --- /dev/null +++ b/integrations/react-next-15/README.md @@ -0,0 +1,34 @@ +This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). + +## Getting Started + +First, run the development server: + +```bash +npm run dev +# or +yarn dev +# or +pnpm dev +``` + +Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. + +You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file. + +This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font. + +## Learn More + +To learn more about Next.js, take a look at the following resources: + +- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. +- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. + +You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! + +## Deploy on Vercel + +The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. + +Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. diff --git a/integrations/react-next-15/app/client-component.tsx b/integrations/react-next-15/app/client-component.tsx new file mode 100644 index 0000000000..718fe48186 --- /dev/null +++ b/integrations/react-next-15/app/client-component.tsx @@ -0,0 +1,24 @@ +'use client' + +import React from 'react' +import { useQuery } from '@tanstack/react-query' + +export function ClientComponent() { + const query = useQuery({ + queryKey: ['data'], + queryFn: async () => { + await new Promise((r) => setTimeout(r, 1000)) + return 'data from client' + }, + }) + + if (query.isPending) { + return
Loading...
+ } + + if (query.isError) { + return
An error has occurred!
+ } + + return
{query.data}
+} diff --git a/integrations/react-next-15/app/favicon.ico b/integrations/react-next-15/app/favicon.ico new file mode 100644 index 0000000000..718d6fea48 Binary files /dev/null and b/integrations/react-next-15/app/favicon.ico differ diff --git a/integrations/react-next-15/app/layout.tsx b/integrations/react-next-15/app/layout.tsx new file mode 100644 index 0000000000..265be95e9e --- /dev/null +++ b/integrations/react-next-15/app/layout.tsx @@ -0,0 +1,22 @@ +import React from 'react' +import Providers from './providers' +import type { Metadata } from 'next' + +export const metadata: Metadata = { + title: 'Create Next App', + description: 'Generated by create next app', +} + +export default function RootLayout({ + children, +}: { + children: React.ReactNode +}) { + return ( + + + {children} + + + ) +} diff --git a/integrations/react-next-15/app/make-query-client.ts b/integrations/react-next-15/app/make-query-client.ts new file mode 100644 index 0000000000..4bd06b67ab --- /dev/null +++ b/integrations/react-next-15/app/make-query-client.ts @@ -0,0 +1,16 @@ +import { QueryClient, defaultShouldDehydrateQuery } from '@tanstack/react-query' + +export function makeQueryClient() { + return new QueryClient({ + defaultOptions: { + queries: { + staleTime: 60 * 1000, + }, + dehydrate: { + shouldDehydrateQuery: (query) => + defaultShouldDehydrateQuery(query) || + query.state.status === 'pending', + }, + }, + }) +} diff --git a/integrations/react-next-15/app/page.tsx b/integrations/react-next-15/app/page.tsx new file mode 100644 index 0000000000..013e042596 --- /dev/null +++ b/integrations/react-next-15/app/page.tsx @@ -0,0 +1,26 @@ +import React from 'react' +import { HydrationBoundary, dehydrate } from '@tanstack/react-query' +import { makeQueryClient } from '@/app/make-query-client' +import { ClientComponent } from './client-component' + +const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms)) + +export default async function Home() { + const queryClient = makeQueryClient() + + void queryClient.prefetchQuery({ + queryKey: ['data'], + queryFn: async () => { + await sleep(2000) + return 'data from server' + }, + }) + + return ( +
+ + + +
+ ) +} diff --git a/integrations/react-next-15/app/providers.tsx b/integrations/react-next-15/app/providers.tsx new file mode 100644 index 0000000000..25a9217ff9 --- /dev/null +++ b/integrations/react-next-15/app/providers.tsx @@ -0,0 +1,16 @@ +'use client' +import { QueryClientProvider } from '@tanstack/react-query' +import { ReactQueryDevtools } from '@tanstack/react-query-devtools' +import * as React from 'react' +import { makeQueryClient } from '@/app/make-query-client' + +export default function Providers({ children }: { children: React.ReactNode }) { + const [queryClient] = React.useState(() => makeQueryClient()) + + return ( + + {children} + + + ) +} diff --git a/integrations/react-next-15/next.config.js b/integrations/react-next-15/next.config.js new file mode 100644 index 0000000000..8d2a9bf37a --- /dev/null +++ b/integrations/react-next-15/next.config.js @@ -0,0 +1,8 @@ +/** @type {import('next').NextConfig} */ +const nextConfig = { + eslint: { + ignoreDuringBuilds: true, + }, +} + +module.exports = nextConfig diff --git a/integrations/react-next-15/package.json b/integrations/react-next-15/package.json new file mode 100644 index 0000000000..50855af036 --- /dev/null +++ b/integrations/react-next-15/package.json @@ -0,0 +1,21 @@ +{ + "name": "react-next-15", + "private": true, + "scripts": { + "dev": "next dev", + "build": "next build" + }, + "dependencies": { + "@tanstack/react-query": "workspace:*", + "@tanstack/react-query-devtools": "workspace:*", + "next": "^15.0.0-rc.0", + "react": "^19.0.0-rc-4c2e457c7c-20240522", + "react-dom": "^19.0.0-rc-4c2e457c7c-20240522" + }, + "devDependencies": { + "@types/node": "^20.12.12", + "@types/react": "npm:types-react@rc", + "@types/react-dom": "npm:types-react-dom@rc", + "typescript": "5.3.3" + } +} diff --git a/integrations/react-next-15/tsconfig.json b/integrations/react-next-15/tsconfig.json new file mode 100644 index 0000000000..e3ea9649f2 --- /dev/null +++ b/integrations/react-next-15/tsconfig.json @@ -0,0 +1,34 @@ +{ + "compilerOptions": { + "target": "es5", + "lib": ["dom", "dom.iterable", "esnext"], + "allowJs": true, + "skipLibCheck": true, + "strict": true, + "forceConsistentCasingInFileNames": true, + "noEmit": true, + "esModuleInterop": true, + "module": "esnext", + "moduleResolution": "bundler", + "resolveJsonModule": true, + "isolatedModules": true, + "jsx": "preserve", + "incremental": true, + "plugins": [ + { + "name": "next" + } + ], + "paths": { + "@/*": ["./*"] + } + }, + "include": [ + "next-env.d.ts", + "**/*.ts", + "**/*.tsx", + ".next/types/**/*.ts", + ".eslintrc.cjs" + ], + "exclude": ["node_modules"] +} diff --git a/package.json b/package.json index 934a5f8166..1cd0db0767 100644 --- a/package.json +++ b/package.json @@ -17,7 +17,7 @@ "test:ci": "nx run-many --targets=test:format,test:sherif,test:knip,test:eslint,test:lib,test:types,test:build,build,test:attw", "test:eslint": "nx affected --target=test:eslint --exclude=examples/**", "test:format": "pnpm run prettier --check", - "test:sherif": "sherif -i react-scripts -i react -i react-dom", + "test:sherif": "sherif -i react-scripts -i react -i react-dom -i next", "test:lib": "nx affected --target=test:lib --exclude=examples/**", "test:lib:dev": "pnpm run test:lib && nx watch --all -- pnpm run test:lib", "test:build": "nx affected --target=test:build --exclude=examples/**", diff --git a/packages/query-core/src/__tests__/hydration.test.tsx b/packages/query-core/src/__tests__/hydration.test.tsx index 45d67d148e..463fe401e6 100644 --- a/packages/query-core/src/__tests__/hydration.test.tsx +++ b/packages/query-core/src/__tests__/hydration.test.tsx @@ -1,4 +1,5 @@ import { describe, expect, test, vi } from 'vitest' +import { waitFor } from '@testing-library/react' import { QueryCache } from '../queryCache' import { dehydrate, hydrate } from '../hydration' import { MutationCache } from '../mutationCache' @@ -174,6 +175,84 @@ describe('dehydration and rehydration', () => { hydrationClient.clear() }) + test('should respect query defaultOptions specified on the QueryClient', async () => { + const queryCache = new QueryCache() + const queryClient = createQueryClient({ + queryCache, + defaultOptions: { + dehydrate: { shouldDehydrateQuery: () => true }, + }, + }) + await queryClient.prefetchQuery({ + queryKey: ['string'], + retry: 0, + queryFn: () => Promise.reject(new Error('error')), + }) + const dehydrated = dehydrate(queryClient) + expect(dehydrated.queries.length).toBe(1) + expect(dehydrated.queries[0]?.state.error).toStrictEqual(new Error('error')) + const stringified = JSON.stringify(dehydrated) + const parsed = JSON.parse(stringified) + const hydrationCache = new QueryCache() + const hydrationClient = createQueryClient({ + queryCache: hydrationCache, + defaultOptions: { hydrate: { queries: { retry: 10 } } }, + }) + hydrate(hydrationClient, parsed, { + defaultOptions: { queries: { gcTime: 10 } }, + }) + expect(hydrationCache.find({ queryKey: ['string'] })?.options.retry).toBe( + 10, + ) + expect(hydrationCache.find({ queryKey: ['string'] })?.options.gcTime).toBe( + 10, + ) + queryClient.clear() + hydrationClient.clear() + }) + + test('should respect mutation defaultOptions specified on the QueryClient', async () => { + const mutationCache = new MutationCache() + const queryClient = createQueryClient({ + mutationCache, + defaultOptions: { + dehydrate: { + shouldDehydrateMutation: (mutation) => mutation.state.data === 'done', + }, + }, + }) + await executeMutation( + queryClient, + { + mutationKey: ['string'], + mutationFn: () => Promise.resolve('done'), + }, + undefined, + ) + + const dehydrated = dehydrate(queryClient) + expect(dehydrated.mutations.length).toBe(1) + expect(dehydrated.mutations[0]?.state.data).toBe('done') + const stringified = JSON.stringify(dehydrated) + const parsed = JSON.parse(stringified) + const hydrationCache = new MutationCache() + const hydrationClient = createQueryClient({ + mutationCache: hydrationCache, + defaultOptions: { hydrate: { mutations: { retry: 10 } } }, + }) + hydrate(hydrationClient, parsed, { + defaultOptions: { mutations: { gcTime: 10 } }, + }) + expect( + hydrationCache.find({ mutationKey: ['string'] })?.options.retry, + ).toBe(10) + expect( + hydrationCache.find({ mutationKey: ['string'] })?.options.gcTime, + ).toBe(10) + queryClient.clear() + hydrationClient.clear() + }) + test('should work with complex keys', async () => { const queryCache = new QueryCache() const queryClient = createQueryClient({ queryCache }) @@ -738,4 +817,95 @@ describe('dehydration and rehydration', () => { onlineMock.mockRestore() }) + + test('should dehydrate promises for pending queries', async () => { + const queryCache = new QueryCache() + const queryClient = createQueryClient({ + queryCache, + defaultOptions: { dehydrate: { shouldDehydrateQuery: () => true } }, + }) + await queryClient.prefetchQuery({ + queryKey: ['success'], + queryFn: () => fetchData('success'), + }) + + const promise = queryClient.prefetchQuery({ + queryKey: ['pending'], + queryFn: () => fetchData('pending', 10), + }) + const dehydrated = dehydrate(queryClient) + + expect(dehydrated.queries[0]?.promise).toBeUndefined() + expect(dehydrated.queries[1]?.promise).toBeInstanceOf(Promise) + + await promise + queryClient.clear() + }) + + test('should hydrate promises even without observers', async () => { + const queryCache = new QueryCache() + const queryClient = createQueryClient({ + queryCache, + defaultOptions: { dehydrate: { shouldDehydrateQuery: () => true } }, + }) + await queryClient.prefetchQuery({ + queryKey: ['success'], + queryFn: () => fetchData('success'), + }) + + void queryClient.prefetchQuery({ + queryKey: ['pending'], + queryFn: () => fetchData('pending', 20), + }) + const dehydrated = dehydrate(queryClient) + // no stringify/parse here because promises can't be serialized to json + // but nextJs still can do it + + const hydrationCache = new QueryCache() + const hydrationClient = createQueryClient({ + queryCache: hydrationCache, + }) + + hydrate(hydrationClient, dehydrated) + + expect(hydrationCache.find({ queryKey: ['success'] })?.state.data).toBe( + 'success', + ) + + expect(hydrationCache.find({ queryKey: ['pending'] })?.state).toMatchObject( + { + data: undefined, + dataUpdateCount: 0, + dataUpdatedAt: 0, + error: null, + errorUpdateCount: 0, + errorUpdatedAt: 0, + fetchFailureCount: 0, + fetchFailureReason: null, + fetchMeta: null, + fetchStatus: 'fetching', + isInvalidated: false, + status: 'pending', + }, + ) + + await waitFor(() => + expect( + hydrationCache.find({ queryKey: ['pending'] })?.state, + ).toMatchObject({ + data: 'pending', + dataUpdateCount: 1, + dataUpdatedAt: expect.any(Number), + error: null, + errorUpdateCount: 0, + errorUpdatedAt: 0, + fetchFailureCount: 0, + fetchFailureReason: null, + fetchMeta: null, + fetchStatus: 'idle', + isInvalidated: false, + status: 'success', + }), + ) + }) }) diff --git a/packages/query-core/src/hydration.ts b/packages/query-core/src/hydration.ts index 564cf13319..b4cc8b3fb4 100644 --- a/packages/query-core/src/hydration.ts +++ b/packages/query-core/src/hydration.ts @@ -37,6 +37,7 @@ interface DehydratedQuery { queryHash: string queryKey: QueryKey state: QueryState + promise?: Promise meta?: QueryMeta } @@ -65,6 +66,16 @@ function dehydrateQuery(query: Query): DehydratedQuery { state: query.state, queryKey: query.queryKey, queryHash: query.queryHash, + ...(query.state.status === 'pending' && { + promise: query.promise?.catch((error) => { + if (process.env.NODE_ENV !== 'production') { + console.error( + `A query that was dehydrated as pending ended up rejecting. [${query.queryHash}]: ${error}; The error will be redacted in production builds`, + ) + } + return Promise.reject(new Error('redacted')) + }), + }), ...(query.meta && { meta: query.meta }), } } @@ -82,7 +93,9 @@ export function dehydrate( options: DehydrateOptions = {}, ): DehydratedState { const filterMutation = - options.shouldDehydrateMutation ?? defaultShouldDehydrateMutation + options.shouldDehydrateMutation ?? + client.getDefaultOptions().dehydrate?.shouldDehydrateMutation ?? + defaultShouldDehydrateMutation const mutations = client .getMutationCache() @@ -92,7 +105,9 @@ export function dehydrate( ) const filterQuery = - options.shouldDehydrateQuery ?? defaultShouldDehydrateQuery + options.shouldDehydrateQuery ?? + client.getDefaultOptions().dehydrate?.shouldDehydrateQuery ?? + defaultShouldDehydrateQuery const queries = client .getQueryCache() @@ -123,6 +138,7 @@ export function hydrate( mutationCache.build( client, { + ...client.getDefaultOptions().hydrate?.mutations, ...options?.defaultOptions?.mutations, ...mutationOptions, }, @@ -130,8 +146,8 @@ export function hydrate( ) }) - queries.forEach(({ queryKey, state, queryHash, meta }) => { - const query = queryCache.get(queryHash) + queries.forEach(({ queryKey, state, queryHash, meta, promise }) => { + let query = queryCache.get(queryHash) // Do not hydrate if an existing query exists with newer data if (query) { @@ -141,24 +157,30 @@ export function hydrate( const { fetchStatus: _ignored, ...dehydratedQueryState } = state query.setState(dehydratedQueryState) } - return + } else { + // Restore query + query = queryCache.build( + client, + { + ...client.getDefaultOptions().hydrate?.queries, + ...options?.defaultOptions?.queries, + queryKey, + queryHash, + meta, + }, + // Reset fetch status to idle to avoid + // query being stuck in fetching state upon hydration + { + ...state, + fetchStatus: 'idle', + }, + ) } - // Restore query - queryCache.build( - client, - { - ...options?.defaultOptions?.queries, - queryKey, - queryHash, - meta, - }, - // Reset fetch status to idle to avoid - // query being stuck in fetching state upon hydration - { - ...state, - fetchStatus: 'idle', - }, - ) + if (promise) { + // this doesn't actually fetch - it just creates a retryer + // which will re-use the passed `initialPromise` + void query.fetch(undefined, { initialPromise: promise }) + } }) } diff --git a/packages/query-core/src/infiniteQueryBehavior.ts b/packages/query-core/src/infiniteQueryBehavior.ts index 09a5229c0d..57bcfa2312 100644 --- a/packages/query-core/src/infiniteQueryBehavior.ts +++ b/packages/query-core/src/infiniteQueryBehavior.ts @@ -1,4 +1,4 @@ -import { addToEnd, addToStart, skipToken } from './utils' +import { addToEnd, addToStart, ensureQueryFn } from './utils' import type { QueryBehavior } from './query' import type { InfiniteData, @@ -37,22 +37,7 @@ export function infiniteQueryBehavior( }) } - // Get query function - const queryFn = - context.options.queryFn && context.options.queryFn !== skipToken - ? context.options.queryFn - : () => { - if (process.env.NODE_ENV !== 'production') { - if (context.options.queryFn === skipToken) { - console.error( - `Attempted to invoke queryFn when set to skipToken. This is likely a configuration error. Query hash: '${context.options.queryHash}'`, - ) - } - } - return Promise.reject( - new Error(`Missing queryFn: '${context.options.queryHash}'`), - ) - } + const queryFn = ensureQueryFn(context.options, context.fetchOptions) // Create function to fetch a page const fetchPage = async ( diff --git a/packages/query-core/src/query.ts b/packages/query-core/src/query.ts index dd427d629d..2ccb91e201 100644 --- a/packages/query-core/src/query.ts +++ b/packages/query-core/src/query.ts @@ -1,4 +1,4 @@ -import { noop, replaceData, skipToken, timeUntilStale } from './utils' +import { ensureQueryFn, noop, replaceData, timeUntilStale } from './utils' import { notifyManager } from './notifyManager' import { canFetch, createRetryer, isCancelledError } from './retryer' import { Removable } from './removable' @@ -8,6 +8,7 @@ import type { FetchStatus, InitialDataFunction, OmitKeyof, + QueryFunction, QueryFunctionContext, QueryKey, QueryMeta, @@ -82,9 +83,10 @@ export interface FetchMeta { fetchMore?: { direction: FetchDirection } } -export interface FetchOptions { +export interface FetchOptions { cancelRefetch?: boolean meta?: FetchMeta + initialPromise?: Promise } interface FailedAction { @@ -182,6 +184,10 @@ export class Query< return this.options.meta } + get promise(): Promise | undefined { + return this.#retryer?.promise + } + setOptions( options?: QueryOptions, ): void { @@ -330,7 +336,7 @@ export class Query< fetch( options?: QueryOptions, - fetchOptions?: FetchOptions, + fetchOptions?: FetchOptions, ): Promise { if (this.state.fetchStatus !== 'idle') { if (this.state.data !== undefined && fetchOptions?.cancelRefetch) { @@ -368,15 +374,6 @@ export class Query< const abortController = new AbortController() - // Create query function context - const queryFnContext: OmitKeyof< - QueryFunctionContext, - 'signal' - > = { - queryKey: this.queryKey, - meta: this.meta, - } - // Adds an enumerable signal property to the object that // which sets abortSignalConsumed to true when the signal // is read. @@ -390,36 +387,31 @@ export class Query< }) } - addSignalProperty(queryFnContext) - // Create fetch function const fetchFn = () => { - if (process.env.NODE_ENV !== 'production') { - if (this.options.queryFn === skipToken) { - console.error( - `Attempted to invoke queryFn when set to skipToken. This is likely a configuration error. Query hash: '${this.options.queryHash}'`, - ) - } + const queryFn = ensureQueryFn(this.options, fetchOptions) + + // Create query function context + const queryFnContext: OmitKeyof< + QueryFunctionContext, + 'signal' + > = { + queryKey: this.queryKey, + meta: this.meta, } - if (!this.options.queryFn || this.options.queryFn === skipToken) { - return Promise.reject( - new Error(`Missing queryFn: '${this.options.queryHash}'`), - ) - } + addSignalProperty(queryFnContext) this.#abortSignalConsumed = false if (this.options.persister) { return this.options.persister( - this.options.queryFn, + queryFn as QueryFunction, queryFnContext as QueryFunctionContext, this as unknown as Query, ) } - return this.options.queryFn( - queryFnContext as QueryFunctionContext, - ) + return queryFn(queryFnContext as QueryFunctionContext) } // Trigger behavior hook @@ -483,6 +475,9 @@ export class Query< // Try to fetch the data this.#retryer = createRetryer({ + initialPromise: fetchOptions?.initialPromise as + | Promise + | undefined, fn: context.fetchFn as () => Promise, abort: abortController.abort.bind(abortController), onSuccess: (data) => { diff --git a/packages/query-core/src/queryObserver.ts b/packages/query-core/src/queryObserver.ts index 5defe720bc..f4783938bb 100644 --- a/packages/query-core/src/queryObserver.ts +++ b/packages/query-core/src/queryObserver.ts @@ -318,7 +318,7 @@ export class QueryObserver< } #executeFetch( - fetchOptions?: ObserverFetchOptions, + fetchOptions?: Omit, ): Promise { // Make sure we reference the latest query as the current one might have been removed this.#updateQuery() diff --git a/packages/query-core/src/retryer.ts b/packages/query-core/src/retryer.ts index fb1584aad9..e677b0b9ef 100644 --- a/packages/query-core/src/retryer.ts +++ b/packages/query-core/src/retryer.ts @@ -7,6 +7,7 @@ import type { CancelOptions, DefaultError, NetworkMode } from './types' interface RetryerConfig { fn: () => TData | Promise + initialPromise?: Promise abort?: () => void onError?: (error: TError) => void onSuccess?: (data: TData) => void @@ -146,9 +147,13 @@ export function createRetryer( let promiseOrValue: any + // we can re-use config.initialPromise on the first call of run() + const initialPromise = + failureCount === 0 ? config.initialPromise : undefined + // Execute query try { - promiseOrValue = config.fn() + promiseOrValue = initialPromise ?? config.fn() } catch (error) { promiseOrValue = Promise.reject(error) } diff --git a/packages/query-core/src/types.ts b/packages/query-core/src/types.ts index 98a25b3f03..420365964b 100644 --- a/packages/query-core/src/types.ts +++ b/packages/query-core/src/types.ts @@ -1,5 +1,6 @@ /* istanbul ignore file */ +import type { DehydrateOptions, HydrateOptions } from './hydration' import type { MutationState } from './mutation' import type { FetchDirection, Query, QueryBehavior } from './query' import type { RetryDelayValue, RetryValue } from './retryer' @@ -1119,6 +1120,8 @@ export interface DefaultOptions { 'suspense' | 'queryKey' > mutations?: MutationObserverOptions + hydrate?: HydrateOptions['defaultOptions'] + dehydrate?: DehydrateOptions } export interface CancelOptions { diff --git a/packages/query-core/src/utils.ts b/packages/query-core/src/utils.ts index 3fcf9d47a6..977a6e61fa 100644 --- a/packages/query-core/src/utils.ts +++ b/packages/query-core/src/utils.ts @@ -1,12 +1,13 @@ -import type { Mutation } from './mutation' -import type { Query } from './query' import type { FetchStatus, MutationKey, MutationStatus, + QueryFunction, QueryKey, QueryOptions, } from './types' +import type { Mutation } from './mutation' +import type { FetchOptions, Query } from './query' // TYPES @@ -349,3 +350,36 @@ export function addToStart(items: Array, item: T, max = 0): Array { export const skipToken = Symbol() export type SkipToken = typeof skipToken + +export const ensureQueryFn = < + TQueryFnData = unknown, + TQueryKey extends QueryKey = QueryKey, +>( + options: { + queryFn?: QueryFunction | SkipToken + queryHash?: string + }, + fetchOptions?: FetchOptions, +): QueryFunction => { + if (process.env.NODE_ENV !== 'production') { + if (options.queryFn === skipToken) { + console.error( + `Attempted to invoke queryFn when set to skipToken. This is likely a configuration error. Query hash: '${options.queryHash}'`, + ) + } + } + + // if we attempt to retry a fetch that was triggered from an initialPromise + // when we don't have a queryFn yet, we can't retry, so we just return the already rejected initialPromise + // if an observer has already mounted, we will be able to retry with that queryFn + if (!options.queryFn && fetchOptions?.initialPromise) { + return () => fetchOptions.initialPromise! + } + + if (!options.queryFn || options.queryFn === skipToken) { + return () => + Promise.reject(new Error(`Missing queryFn: '${options.queryHash}'`)) + } + + return options.queryFn +} diff --git a/packages/react-query/src/__tests__/useQuery.test.tsx b/packages/react-query/src/__tests__/useQuery.test.tsx index 12656e5929..ee7ddccdc3 100644 --- a/packages/react-query/src/__tests__/useQuery.test.tsx +++ b/packages/react-query/src/__tests__/useQuery.test.tsx @@ -2,7 +2,7 @@ import { describe, expect, expectTypeOf, it, test, vi } from 'vitest' import { act, fireEvent, render, waitFor } from '@testing-library/react' import * as React from 'react' import { ErrorBoundary } from 'react-error-boundary' -import { skipToken } from '@tanstack/query-core' +import { dehydrate, hydrate, skipToken } from '@tanstack/query-core' import { QueryCache, keepPreviousData, useQuery } from '..' import { Blink, @@ -6476,4 +6476,117 @@ describe('useQuery', () => { }) expect(results[3]?.errorUpdatedAt).toBeGreaterThan(0) }) + + it('should pick up an initialPromise', async () => { + const key = queryKey() + + const serverQueryClient = createQueryClient({ + defaultOptions: { dehydrate: { shouldDehydrateQuery: () => true } }, + }) + + void serverQueryClient.prefetchQuery({ + queryKey: key, + queryFn: async () => { + await sleep(10) + return Promise.resolve('server') + }, + }) + + const dehydrated = dehydrate(serverQueryClient) + + let count = 0 + + function Page() { + const query = useQuery({ + queryKey: key, + queryFn: async () => { + count++ + await sleep(10) + return Promise.resolve('client') + }, + }) + + return ( +
+
data: {query.data}
+ +
+ ) + } + + const clientQueryClient = createQueryClient() + hydrate(clientQueryClient, dehydrated) + + const rendered = renderWithClient(clientQueryClient, ) + + await waitFor(() => rendered.getByText('data: server')) + expect(count).toBe(0) + + fireEvent.click(rendered.getByRole('button', { name: 'refetch' })) + + await waitFor(() => rendered.getByText('data: client')) + expect(count).toBe(1) + }) + + it('should retry failed initialPromise on the client', async () => { + const consoleMock = vi + .spyOn(console, 'error') + .mockImplementation(() => undefined) + const key = queryKey() + + const serverQueryClient = createQueryClient({ + defaultOptions: { + dehydrate: { shouldDehydrateQuery: () => true }, + }, + }) + + void serverQueryClient.prefetchQuery({ + queryKey: key, + queryFn: async () => { + await sleep(10) + return Promise.reject(new Error('server error')) + }, + }) + + const dehydrated = dehydrate(serverQueryClient) + + let count = 0 + + function Page() { + const query = useQuery({ + queryKey: key, + queryFn: async () => { + count++ + await sleep(10) + return Promise.resolve('client') + }, + }) + + return ( +
+
failure: {query.failureReason?.message}
+
data: {query.data}
+
+ ) + } + + const clientQueryClient = createQueryClient({ + defaultOptions: { hydrate: { queries: { retry: 1, retryDelay: 10 } } }, + }) + hydrate(clientQueryClient, dehydrated) + + const rendered = renderWithClient(clientQueryClient, ) + await waitFor(() => rendered.getByText('failure: redacted')) + await waitFor(() => rendered.getByText('data: client')) + expect(count).toBe(1) + + const query = clientQueryClient.getQueryCache().find({ queryKey: key }) + + expect(consoleMock).toHaveBeenCalledTimes(1) + expect(consoleMock).toHaveBeenCalledWith( + `A query that was dehydrated as pending ended up rejecting. [${query?.queryHash}]: Error: server error; The error will be redacted in production builds`, + ) + + consoleMock.mockRestore() + }) }) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 40b4f99bce..f2497d4df8 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -628,6 +628,37 @@ importers: specifier: ^4.0.0 version: 4.0.0 + examples/react/nextjs-app-prefetching: + dependencies: + '@tanstack/react-query': + specifier: ^5.39.0 + version: link:../../../packages/react-query + '@tanstack/react-query-devtools': + specifier: ^5.39.0 + version: link:../../../packages/react-query-devtools + next: + specifier: ^15.0.0-rc.0 + version: 15.0.0-rc.0(@babel/core@7.24.6)(react-dom@19.0.0-rc-4c2e457c7c-20240522(react@19.0.0-rc-4c2e457c7c-20240522))(react@19.0.0-rc-4c2e457c7c-20240522)(sass@1.71.1) + react: + specifier: ^19.0.0-rc-4c2e457c7c-20240522 + version: 19.0.0-rc-4c2e457c7c-20240522 + react-dom: + specifier: ^19.0.0-rc-4c2e457c7c-20240522 + version: 19.0.0-rc-4c2e457c7c-20240522(react@19.0.0-rc-4c2e457c7c-20240522) + devDependencies: + '@types/node': + specifier: ^20.12.12 + version: 20.12.12 + '@types/react': + specifier: npm:types-react@rc + version: types-react@19.0.0-rc.0 + '@types/react-dom': + specifier: npm:types-react-dom@rc + version: types-react-dom@19.0.0-rc.0 + typescript: + specifier: 5.3.3 + version: 5.3.3 + examples/react/nextjs-suspense-streaming: dependencies: '@tanstack/react-query': @@ -1761,6 +1792,37 @@ importers: specifier: 5.3.3 version: 5.3.3 + integrations/react-next-15: + dependencies: + '@tanstack/react-query': + specifier: workspace:* + version: link:../../packages/react-query + '@tanstack/react-query-devtools': + specifier: workspace:* + version: link:../../packages/react-query-devtools + next: + specifier: ^15.0.0-rc.0 + version: 15.0.0-rc.0(@babel/core@7.24.6)(react-dom@19.0.0-rc-4c2e457c7c-20240522(react@19.0.0-rc-4c2e457c7c-20240522))(react@19.0.0-rc-4c2e457c7c-20240522)(sass@1.71.1) + react: + specifier: ^19.0.0-rc-4c2e457c7c-20240522 + version: 19.0.0-rc-4c2e457c7c-20240522 + react-dom: + specifier: ^19.0.0-rc-4c2e457c7c-20240522 + version: 19.0.0-rc-4c2e457c7c-20240522(react@19.0.0-rc-4c2e457c7c-20240522) + devDependencies: + '@types/node': + specifier: ^20.12.12 + version: 20.12.12 + '@types/react': + specifier: npm:types-react@rc + version: types-react@19.0.0-rc.0 + '@types/react-dom': + specifier: npm:types-react-dom@rc + version: types-react-dom@19.0.0-rc.0 + typescript: + specifier: 5.3.3 + version: 5.3.3 + integrations/react-vite: dependencies: '@tanstack/react-query': @@ -5306,60 +5368,117 @@ packages: '@next/env@14.0.0': resolution: {integrity: sha512-cIKhxkfVELB6hFjYsbtEeTus2mwrTC+JissfZYM0n+8Fv+g8ucUfOlm3VEDtwtwydZ0Nuauv3bl0qF82nnCAqA==} + '@next/env@15.0.0-rc.0': + resolution: {integrity: sha512-6W0ndQvHR9sXcqcKeR/inD2UTRCs9+VkSK3lfaGmEuZs7EjwwXMO2BPYjz9oBrtfPL3xuTjtXsHKSsalYQ5l1Q==} + '@next/swc-darwin-arm64@14.0.0': resolution: {integrity: sha512-HQKi159jCz4SRsPesVCiNN6tPSAFUkOuSkpJsqYTIlbHLKr1mD6be/J0TvWV6fwJekj81bZV9V/Tgx3C2HO9lA==} engines: {node: '>= 10'} cpu: [arm64] os: [darwin] + '@next/swc-darwin-arm64@15.0.0-rc.0': + resolution: {integrity: sha512-4OpTXvAWcSabXA5d688zdUwa3sfT9QrLnHMdpv4q2UDnnuqmOI0xLb6lrOxwpi+vHJNkneuNLqyc5HGBhkqL6A==} + engines: {node: '>= 10'} + cpu: [arm64] + os: [darwin] + '@next/swc-darwin-x64@14.0.0': resolution: {integrity: sha512-4YyQLMSaCgX/kgC1jjF3s3xSoBnwHuDhnF6WA1DWNEYRsbOOPWjcYhv8TKhRe2ApdOam+VfQSffC4ZD+X4u1Cg==} engines: {node: '>= 10'} cpu: [x64] os: [darwin] + '@next/swc-darwin-x64@15.0.0-rc.0': + resolution: {integrity: sha512-/TD8M9DT244uhtFA8P/0DUbM7ftg2zio6yOo6ajV16vNjkcug9Kt9//Wa4SrJjWcsGZpViLctOlwn3/6JFAuAA==} + engines: {node: '>= 10'} + cpu: [x64] + os: [darwin] + '@next/swc-linux-arm64-gnu@14.0.0': resolution: {integrity: sha512-io7fMkJ28Glj7SH8yvnlD6naIhRDnDxeE55CmpQkj3+uaA2Hko6WGY2pT5SzpQLTnGGnviK85cy8EJ2qsETj/g==} engines: {node: '>= 10'} cpu: [arm64] os: [linux] + '@next/swc-linux-arm64-gnu@15.0.0-rc.0': + resolution: {integrity: sha512-3VTO32938AcqOlOI/U61/MIpeYrblP22VU1GrgmMQJozsAXEJgLCgf3wxZtn61/FG4Yc0tp7rPZE2t1fIGe0+w==} + engines: {node: '>= 10'} + cpu: [arm64] + os: [linux] + '@next/swc-linux-arm64-musl@14.0.0': resolution: {integrity: sha512-nC2h0l1Jt8LEzyQeSs/BKpXAMe0mnHIMykYALWaeddTqCv5UEN8nGO3BG8JAqW/Y8iutqJsaMe2A9itS0d/r8w==} engines: {node: '>= 10'} cpu: [arm64] os: [linux] + '@next/swc-linux-arm64-musl@15.0.0-rc.0': + resolution: {integrity: sha512-0kDnxM3AfrrHFJ/wTkjkv7cVHIaGwv+CzDg9lL2BoLEM4kMQhH20DTsBOMqpTpo1K2KCg67LuTGd3QOITT5uFQ==} + engines: {node: '>= 10'} + cpu: [arm64] + os: [linux] + '@next/swc-linux-x64-gnu@14.0.0': resolution: {integrity: sha512-Wf+WjXibJQ7hHXOdNOmSMW5bxeJHVf46Pwb3eLSD2L76NrytQlif9NH7JpHuFlYKCQGfKfgSYYre5rIfmnSwQw==} engines: {node: '>= 10'} cpu: [x64] os: [linux] + '@next/swc-linux-x64-gnu@15.0.0-rc.0': + resolution: {integrity: sha512-fPMNahzqYFjm5h0ncJ5+F3NrShmWhpusM+zrQl01MMU0Ed5xsL4pJJDSuXV4wPkNUSjCP3XstTjxR5kBdO4juQ==} + engines: {node: '>= 10'} + cpu: [x64] + os: [linux] + '@next/swc-linux-x64-musl@14.0.0': resolution: {integrity: sha512-WTZb2G7B+CTsdigcJVkRxfcAIQj7Lf0ipPNRJ3vlSadU8f0CFGv/ST+sJwF5eSwIe6dxKoX0DG6OljDBaad+rg==} engines: {node: '>= 10'} cpu: [x64] os: [linux] + '@next/swc-linux-x64-musl@15.0.0-rc.0': + resolution: {integrity: sha512-7/FLgOqrrQAxOVQrxfr3bGgZ83pSCmc2S3TXBILnHw0S8qLxmFjhSjH5ogaDmjrES/PSYMaX1FsP5Af88hp7Gw==} + engines: {node: '>= 10'} + cpu: [x64] + os: [linux] + '@next/swc-win32-arm64-msvc@14.0.0': resolution: {integrity: sha512-7R8/x6oQODmNpnWVW00rlWX90sIlwluJwcvMT6GXNIBOvEf01t3fBg0AGURNKdTJg2xNuP7TyLchCL7Lh2DTiw==} engines: {node: '>= 10'} cpu: [arm64] os: [win32] + '@next/swc-win32-arm64-msvc@15.0.0-rc.0': + resolution: {integrity: sha512-5wcqoYHh7hbdghjH6Xs3i5/f0ov+i1Xw2E3O+BzZNESYVLgCM1q7KJu5gdGFoXA2gz5XaKF/VBcYHikLzyjgmA==} + engines: {node: '>= 10'} + cpu: [arm64] + os: [win32] + '@next/swc-win32-ia32-msvc@14.0.0': resolution: {integrity: sha512-RLK1nELvhCnxaWPF07jGU4x3tjbyx2319q43loZELqF0+iJtKutZ+Lk8SVmf/KiJkYBc7Cragadz7hb3uQvz4g==} engines: {node: '>= 10'} cpu: [ia32] os: [win32] + '@next/swc-win32-ia32-msvc@15.0.0-rc.0': + resolution: {integrity: sha512-/hqOmYRTvtBPToE4Dbl9n+sLYU7DPd52R+TtjIrrEzTMgFo2/d7un3sD7GKmb2OwOj/ExyGv6Bd/JzytBVxXlw==} + engines: {node: '>= 10'} + cpu: [ia32] + os: [win32] + '@next/swc-win32-x64-msvc@14.0.0': resolution: {integrity: sha512-g6hLf1SUko+hnnaywQQZzzb3BRecQsoKkF3o/C+F+dOA4w/noVAJngUVkfwF0+2/8FzNznM7ofM6TGZO9svn7w==} engines: {node: '>= 10'} cpu: [x64] os: [win32] + '@next/swc-win32-x64-msvc@15.0.0-rc.0': + resolution: {integrity: sha512-2Jly5nShvCUzzngP3RzdQ3JcuEcHcnIEvkvZDCXqFAK+bWks4+qOkEUO1QIAERQ99J5J9/1AN/8zFBme3Mm57A==} + engines: {node: '>= 10'} + cpu: [x64] + os: [win32] + '@ngtools/webpack@17.3.8': resolution: {integrity: sha512-CjSVVa/9fzMpEDQP01SC4colKCbZwj7vUq0H2bivp8jVsmd21x9Fu0gDBH0Y9NdfAIm4eGZvmiZKMII3vIOaYQ==} engines: {node: ^18.13.0 || >=20.9.0, npm: ^6.11.0 || ^7.5.6 || >=8.0.0, yarn: '>= 1.13.0'} @@ -6325,6 +6444,9 @@ packages: resolution: {integrity: sha512-DOBOK255wfQxguUta2INKkzPj6AIS6iafZYiYmHn6W3pHlycSRRlvWKCfLDG10fXfLWqE3DJHgRUOyJYmARa7g==} engines: {node: '>=10'} + '@swc/helpers@0.5.11': + resolution: {integrity: sha512-YNlnKRWF2sVojTpIyzwou9XoTNbzbzONwRhOoniEioF1AtaitTvVZblaQRrAzChWQ1bLYyYSWzM18y4WwgzJ+A==} + '@swc/helpers@0.5.2': resolution: {integrity: sha512-E4KcWTpoLHqwPHLxidpOqQbcrZVgi0rsmmZXUle1jXmJfuIf/UWpczUJ7MZZ5tlxytgJXyp0w4PGkkeLiuIdZw==} @@ -9169,10 +9291,6 @@ packages: engines: {node: '>=0.10'} hasBin: true - detect-libc@2.0.2: - resolution: {integrity: sha512-UX6sGumvvqSaXgdKGUsgZWqcUyIXZ/vZTrlRT/iobiKhGL0zL4d3osHj3uqllWJK+i+sixDS/3COVEOFbupFyw==} - engines: {node: '>=8'} - detect-libc@2.0.3: resolution: {integrity: sha512-bwy0MGW55bG41VqxxypOsdSdGqLwXPI/focwgTYCFMbdUiBAxLg9CFzG08sz2aqzknwiX7Hkl0bQENjg8iLByw==} engines: {node: '>=8'} @@ -13217,6 +13335,27 @@ packages: sass: optional: true + next@15.0.0-rc.0: + resolution: {integrity: sha512-IWcCvxUSCAuOK5gig4+9yiyt/dLKpIa+WT01Qcx4CBE4TtwJljyTDnCVVn64jDZ4qmSzsaEYXpb4DTI8qbk03A==} + engines: {node: '>=18.17.0'} + hasBin: true + peerDependencies: + '@opentelemetry/api': ^1.1.0 + '@playwright/test': ^1.41.2 + babel-plugin-react-compiler: '*' + react: 19.0.0-rc-f994737d14-20240522 + react-dom: 19.0.0-rc-f994737d14-20240522 + sass: ^1.3.0 + peerDependenciesMeta: + '@opentelemetry/api': + optional: true + '@playwright/test': + optional: true + babel-plugin-react-compiler: + optional: true + sass: + optional: true + ng-packagr@17.3.0: resolution: {integrity: sha512-kMSqxeDgv88SWCoapWNRRN1UdBgwu9/Pw/j7u2WFGmzrIWUFivNWBBSSL94kMxr2La+Z9wMwiL8EwKNvmCpg2A==} engines: {node: ^18.13.0 || >=20.9.0} @@ -16538,6 +16677,19 @@ packages: babel-plugin-macros: optional: true + styled-jsx@5.1.3: + resolution: {integrity: sha512-qLRShOWTE/Mf6Bvl72kFeKBl8N2Eq9WIFfoAuvbtP/6tqlnj1SCjv117n2MIjOPpa1jTorYqLJgsHKy5Y3ziww==} + engines: {node: '>= 12.0.0'} + peerDependencies: + '@babel/core': '*' + babel-plugin-macros: '*' + react: '>= 16.8.0 || 17.x.x || ^18.0.0-0 || ^19.0.0-0' + peerDependenciesMeta: + '@babel/core': + optional: true + babel-plugin-macros: + optional: true + stylehacks@4.0.3: resolution: {integrity: sha512-7GlLk9JwlElY4Y6a/rmbH2MhVlTyVmiJd1PfTCqFaIBEGMYNsrO/v3SeGTdhBThLg4Z+NbOk/qFMwCa+J+3p/g==} engines: {node: '>=6.9.0'} @@ -21786,7 +21938,7 @@ snapshots: node-fetch: 2.7.0(encoding@0.1.13) parse-png: 2.1.0 resolve-from: 5.0.0 - semver: 7.6.0 + semver: 7.6.2 tempy: 0.3.0 transitivePeerDependencies: - encoding @@ -21858,7 +22010,7 @@ snapshots: expo-modules-autolinking: 1.11.1 fs-extra: 9.1.0 resolve-from: 5.0.0 - semver: 7.6.0 + semver: 7.6.2 xml2js: 0.6.0 transitivePeerDependencies: - encoding @@ -22520,14 +22672,14 @@ snapshots: '@mapbox/node-pre-gyp@1.0.11(encoding@0.1.13)': dependencies: - detect-libc: 2.0.2 + detect-libc: 2.0.3 https-proxy-agent: 5.0.1 make-dir: 3.1.0 node-fetch: 2.7.0(encoding@0.1.13) nopt: 5.0.0 npmlog: 5.0.1 rimraf: 3.0.2 - semver: 7.6.0 + semver: 7.6.2 tar: 6.2.0 transitivePeerDependencies: - encoding @@ -22746,33 +22898,62 @@ snapshots: '@next/env@14.0.0': {} + '@next/env@15.0.0-rc.0': {} + '@next/swc-darwin-arm64@14.0.0': optional: true + '@next/swc-darwin-arm64@15.0.0-rc.0': + optional: true + '@next/swc-darwin-x64@14.0.0': optional: true + '@next/swc-darwin-x64@15.0.0-rc.0': + optional: true + '@next/swc-linux-arm64-gnu@14.0.0': optional: true + '@next/swc-linux-arm64-gnu@15.0.0-rc.0': + optional: true + '@next/swc-linux-arm64-musl@14.0.0': optional: true + '@next/swc-linux-arm64-musl@15.0.0-rc.0': + optional: true + '@next/swc-linux-x64-gnu@14.0.0': optional: true + '@next/swc-linux-x64-gnu@15.0.0-rc.0': + optional: true + '@next/swc-linux-x64-musl@14.0.0': optional: true + '@next/swc-linux-x64-musl@15.0.0-rc.0': + optional: true + '@next/swc-win32-arm64-msvc@14.0.0': optional: true + '@next/swc-win32-arm64-msvc@15.0.0-rc.0': + optional: true + '@next/swc-win32-ia32-msvc@14.0.0': optional: true + '@next/swc-win32-ia32-msvc@15.0.0-rc.0': + optional: true + '@next/swc-win32-x64-msvc@14.0.0': optional: true + '@next/swc-win32-x64-msvc@15.0.0-rc.0': + optional: true + '@ngtools/webpack@17.3.8(@angular/compiler-cli@17.3.10(@angular/compiler@17.3.10(@angular/core@17.3.10(rxjs@7.8.1)(zone.js@0.14.6)))(typescript@5.3.3))(typescript@5.3.3)(webpack@5.90.3(esbuild@0.19.11))': dependencies: '@angular/compiler-cli': 17.3.10(@angular/compiler@17.3.10(@angular/core@17.3.10(rxjs@7.8.1)(zone.js@0.14.6)))(typescript@5.3.3) @@ -22820,11 +23001,11 @@ snapshots: '@npmcli/fs@1.1.1': dependencies: '@gar/promisify': 1.1.3 - semver: 7.6.0 + semver: 7.6.2 '@npmcli/fs@3.1.0': dependencies: - semver: 7.6.0 + semver: 7.6.2 '@npmcli/git@5.0.3': dependencies: @@ -22834,7 +23015,7 @@ snapshots: proc-log: 3.0.0 promise-inflight: 1.0.1(bluebird@3.7.2) promise-retry: 2.0.1 - semver: 7.6.0 + semver: 7.6.2 which: 4.0.0 transitivePeerDependencies: - bluebird @@ -23085,7 +23266,7 @@ snapshots: hermes-profile-transformer: 0.0.6 node-stream-zip: 1.15.0 ora: 5.4.1 - semver: 7.6.0 + semver: 7.6.2 strip-ansi: 5.2.0 wcwidth: 1.0.1 yaml: 2.3.4 @@ -23156,7 +23337,7 @@ snapshots: node-fetch: 2.7.0(encoding@0.1.13) open: 6.4.0 ora: 5.4.1 - semver: 7.6.0 + semver: 7.6.2 shell-quote: 1.8.1 sudo-prompt: 9.2.1 transitivePeerDependencies: @@ -23978,6 +24159,10 @@ snapshots: transitivePeerDependencies: - supports-color + '@swc/helpers@0.5.11': + dependencies: + tslib: 2.6.2 + '@swc/helpers@0.5.2': dependencies: tslib: 2.6.2 @@ -24407,7 +24592,7 @@ snapshots: graphemer: 1.4.0 ignore: 5.3.0 natural-compare: 1.4.0 - semver: 7.6.0 + semver: 7.6.2 ts-api-utils: 1.0.3(typescript@5.4.2) optionalDependencies: typescript: 5.4.2 @@ -24543,7 +24728,7 @@ snapshots: glob: 7.2.3 is-glob: 4.0.3 lodash: 4.17.21 - semver: 7.6.0 + semver: 7.6.2 tsutils: 3.21.0(typescript@5.4.2) optionalDependencies: typescript: 5.4.2 @@ -24557,7 +24742,7 @@ snapshots: debug: 4.3.4(supports-color@6.1.0) globby: 11.1.0 is-glob: 4.0.3 - semver: 7.6.0 + semver: 7.6.2 tsutils: 3.21.0(typescript@5.4.2) optionalDependencies: typescript: 5.4.2 @@ -24571,7 +24756,7 @@ snapshots: debug: 4.3.4(supports-color@6.1.0) globby: 11.1.0 is-glob: 4.0.3 - semver: 7.6.0 + semver: 7.6.2 tsutils: 3.21.0(typescript@5.4.2) optionalDependencies: typescript: 5.4.2 @@ -24618,7 +24803,7 @@ snapshots: '@typescript-eslint/typescript-estree': 5.62.0(typescript@5.4.2) eslint: 8.56.0 eslint-scope: 5.1.1 - semver: 7.6.0 + semver: 7.6.2 transitivePeerDependencies: - supports-color - typescript @@ -24632,7 +24817,7 @@ snapshots: '@typescript-eslint/types': 6.20.0 '@typescript-eslint/typescript-estree': 6.20.0(typescript@5.3.3) eslint: 8.56.0 - semver: 7.6.0 + semver: 7.6.2 transitivePeerDependencies: - supports-color - typescript @@ -24646,7 +24831,7 @@ snapshots: '@typescript-eslint/types': 6.20.0 '@typescript-eslint/typescript-estree': 6.20.0(typescript@5.4.2) eslint: 8.56.0 - semver: 7.6.0 + semver: 7.6.2 transitivePeerDependencies: - supports-color - typescript @@ -26447,7 +26632,7 @@ snapshots: builtins@5.0.1: dependencies: - semver: 7.6.0 + semver: 7.6.2 bundle-name@3.0.0: dependencies: @@ -27802,10 +27987,7 @@ snapshots: detect-libc@1.0.3: {} - detect-libc@2.0.2: {} - - detect-libc@2.0.3: - optional: true + detect-libc@2.0.3: {} detect-newline@3.1.0: {} @@ -29499,7 +29681,7 @@ snapshots: memfs: 3.5.3 minimatch: 3.1.2 schema-utils: 2.7.0 - semver: 7.6.0 + semver: 7.6.2 tapable: 1.1.3 typescript: 5.4.2 webpack: 5.90.3(esbuild@0.19.11) @@ -31650,7 +31832,7 @@ snapshots: jest-resolve: 26.6.2 natural-compare: 1.4.0 pretty-format: 26.6.2 - semver: 7.6.0 + semver: 7.6.2 transitivePeerDependencies: - supports-color @@ -31677,7 +31859,7 @@ snapshots: jest-util: 27.5.1 natural-compare: 1.4.0 pretty-format: 27.5.1 - semver: 7.6.0 + semver: 7.6.2 transitivePeerDependencies: - supports-color @@ -32562,7 +32744,7 @@ snapshots: make-dir@4.0.0: dependencies: - semver: 7.6.0 + semver: 7.6.2 make-fetch-happen@13.0.0: dependencies: @@ -33528,6 +33710,33 @@ snapshots: - babel-plugin-macros optional: true + next@15.0.0-rc.0(@babel/core@7.24.6)(react-dom@19.0.0-rc-4c2e457c7c-20240522(react@19.0.0-rc-4c2e457c7c-20240522))(react@19.0.0-rc-4c2e457c7c-20240522)(sass@1.71.1): + dependencies: + '@next/env': 15.0.0-rc.0 + '@swc/helpers': 0.5.11 + busboy: 1.6.0 + caniuse-lite: 1.0.30001605 + graceful-fs: 4.2.11 + postcss: 8.4.31 + react: 19.0.0-rc-4c2e457c7c-20240522 + react-dom: 19.0.0-rc-4c2e457c7c-20240522(react@19.0.0-rc-4c2e457c7c-20240522) + styled-jsx: 5.1.3(@babel/core@7.24.6)(react@19.0.0-rc-4c2e457c7c-20240522) + optionalDependencies: + '@next/swc-darwin-arm64': 15.0.0-rc.0 + '@next/swc-darwin-x64': 15.0.0-rc.0 + '@next/swc-linux-arm64-gnu': 15.0.0-rc.0 + '@next/swc-linux-arm64-musl': 15.0.0-rc.0 + '@next/swc-linux-x64-gnu': 15.0.0-rc.0 + '@next/swc-linux-x64-musl': 15.0.0-rc.0 + '@next/swc-win32-arm64-msvc': 15.0.0-rc.0 + '@next/swc-win32-ia32-msvc': 15.0.0-rc.0 + '@next/swc-win32-x64-msvc': 15.0.0-rc.0 + sass: 1.71.1 + sharp: 0.33.4 + transitivePeerDependencies: + - '@babel/core' + - babel-plugin-macros + ng-packagr@17.3.0(@angular/compiler-cli@17.3.10(@angular/compiler@17.3.10(@angular/core@17.3.10(rxjs@7.8.1)(zone.js@0.14.6)))(typescript@5.3.3))(tailwindcss@3.4.3)(tslib@2.6.2)(typescript@5.3.3): dependencies: '@angular/compiler-cli': 17.3.10(@angular/compiler@17.3.10(@angular/core@17.3.10(rxjs@7.8.1)(zone.js@0.14.6)))(typescript@5.3.3) @@ -33719,7 +33928,7 @@ snapshots: make-fetch-happen: 13.0.0 nopt: 7.2.0 proc-log: 3.0.0 - semver: 7.6.0 + semver: 7.6.2 tar: 6.2.0 which: 4.0.0 transitivePeerDependencies: @@ -33790,7 +33999,7 @@ snapshots: dependencies: hosted-git-info: 7.0.1 is-core-module: 2.13.1 - semver: 7.6.0 + semver: 7.6.2 validate-npm-package-license: 3.0.4 normalize-path@2.1.1: @@ -33822,7 +34031,7 @@ snapshots: npm-install-checks@6.3.0: dependencies: - semver: 7.6.0 + semver: 7.6.2 npm-normalize-package-bin@2.0.0: {} @@ -37683,6 +37892,13 @@ snapshots: optionalDependencies: '@babel/core': 7.24.6 + styled-jsx@5.1.3(@babel/core@7.24.6)(react@19.0.0-rc-4c2e457c7c-20240522): + dependencies: + client-only: 0.0.1 + react: 19.0.0-rc-4c2e457c7c-20240522 + optionalDependencies: + '@babel/core': 7.24.6 + stylehacks@4.0.3: dependencies: browserslist: 4.23.0 @@ -38429,7 +38645,7 @@ snapshots: typescript-auto-import-cache@0.3.2: dependencies: - semver: 7.6.0 + semver: 7.6.2 typescript@5.3.3: {} @@ -39098,7 +39314,7 @@ snapshots: volar-service-typescript@0.0.45(@volar/language-service@2.2.5): dependencies: path-browserify: 1.0.1 - semver: 7.6.0 + semver: 7.6.2 typescript-auto-import-cache: 0.3.2 vscode-languageserver-textdocument: 1.0.11 vscode-nls: 5.2.0