Merge branch 'main' into fix/hydration-boundary-double-fetch

Author: sukvvon

docs/config.json

@@ -183,6 +183,10 @@
               "label": "Quick Start",
               "to": "framework/preact/quick-start"
             },
+            {
+              "label": "Devtools",
+              "to": "framework/preact/devtools"
+            },
             {
               "label": "TypeScript",
               "to": "framework/preact/typescript"
@@ -1140,6 +1144,10 @@
             {
               "label": "Functions / infiniteQueryOptions",
               "to": "framework/svelte/reference/functions/infiniteQueryOptions"
+            },
+            {
+              "label": "Functions / mutationOptions",
+              "to": "framework/svelte/reference/functions/mutationOptions"
             }
           ]
         },
@@ -1419,6 +1427,10 @@
             {
               "label": "Astro",
               "to": "framework/solid/examples/astro"
+            },
+            {
+              "label": "Offline Queries and Mutations",
+              "to": "framework/solid/examples/offline"
             }
           ]
         },
@@ -1585,6 +1597,31 @@
               "to": "framework/vue/plugins/createPersister"
             }
           ]
+        },
+        {
+          "label": "preact",
+          "children": [
+            {
+              "label": "persistQueryClient",
+              "to": "framework/preact/plugins/persistQueryClient"
+            },
+            {
+              "label": "createSyncStoragePersister",
+              "to": "framework/preact/plugins/createSyncStoragePersister"
+            },
+            {
+              "label": "createAsyncStoragePersister",
+              "to": "framework/preact/plugins/createAsyncStoragePersister"
+            },
+            {
+              "label": "broadcastQueryClient (Experimental)",
+              "to": "framework/preact/plugins/broadcastQueryClient"
+            },
+            {
+              "label": "createPersister (Experimental)",
+              "to": "framework/preact/plugins/createPersister"
+            }
+          ]
         }
       ]
     }

docs/framework/angular/guides/caching.md

@@ -19,7 +19,7 @@ Let's assume we are using the default `gcTime` of **5 minutes** and the default
 - A new instance of `injectQuery(() => ({ queryKey: ['todos'], queryFn: fetchTodos }))` initializes.
   - Since no other queries have been made with the `['todos']` query key, this query will show a hard loading state and make a network request to fetch the data.
   - When the network request has completed, the returned data will be cached under the `['todos']` key.
-  - The date will be marked as stale after the configured `staleTime` (defaults to `0`, or immediately).
+  - The data will be marked as stale after the configured `staleTime` (defaults to `0`, or immediately).
 - A second instance of `injectQuery(() => ({ queryKey: ['todos'], queryFn: fetchTodos }))` initializes elsewhere.
   - Since the cache already has data for the `['todos']` key from the first query, that data is immediately returned from the cache.
   - The new instance triggers a new network request using its query function.

docs/framework/angular/guides/paginated-queries.md

@@ -70,7 +70,7 @@ const result = injectQuery(() => ({
 })
 export class PaginationExampleComponent {
   page = signal(0)
-  queryClient = inject(QueryClient)
+  #queryClient = inject(QueryClient)
 
   query = injectQuery(() => ({
     queryKey: ['projects', this.page()],

docs/framework/preact/devtools.md

@@ -0,0 +1,87 @@
+---
+id: devtools
+title: Devtools
+---
+
+Wave your hands in the air and shout hooray because Preact Query comes with dedicated devtools! 🥳
+
+When you begin your Preact Query journey, you'll want these devtools by your side. They help visualize all of the inner workings of Preact Query and will likely save you hours of debugging if you find yourself in a pinch!
+
+> For Chrome, Firefox, and Edge users: Third-party browser extensions are available for debugging TanStack Query directly in browser DevTools. These provide the same functionality as the framework-specific devtools packages:
+>
+> - <img alt="Chrome logo" src="https://www.google.com/chrome/static/images/chrome-logo.svg" width="16" height="16" class="inline mr-1 not-prose" /> [Devtools for Chrome](https://chromewebstore.google.com/detail/tanstack-query-devtools/annajfchloimdhceglpgglpeepfghfai)
+> - <img alt="Firefox logo" src="https://upload.wikimedia.org/wikipedia/commons/a/a0/Firefox_logo%2C_2019.svg" width="16" height="16" class="inline mr-1 not-prose" /> [Devtools for Firefox](https://addons.mozilla.org/en-US/firefox/addon/tanstack-query-devtools/)
+> - <img alt="Edge logo" src="https://upload.wikimedia.org/wikipedia/commons/9/98/Microsoft_Edge_logo_%282019%29.svg" width="16" height="16" class="inline mr-1 not-prose" /> [Devtools for Edge](https://microsoftedge.microsoft.com/addons/detail/tanstack-query-devtools/edmdpkgkacmjopodhfolmphdenmddobj)
+
+## Install and Import the Devtools
+
+The devtools are a separate package that you need to install:
+
+```bash
+npm i @tanstack/preact-query-devtools
+```
+
+or
+
+```bash
+pnpm add @tanstack/preact-query-devtools
+```
+
+or
+
+```bash
+yarn add @tanstack/preact-query-devtools
+```
+
+or
+
+```bash
+bun add @tanstack/preact-query-devtools
+```
+
+You can import the devtools like this:
+
+```tsx
+import { PreactQueryDevtools } from '@tanstack/preact-query-devtools'
+```
+
+By default, Preact Query Devtools are only included in bundles when `process.env.NODE_ENV === 'development'`, so you don't need to worry about excluding them during a production build.
+
+## Floating Mode
+
+Floating Mode will mount the devtools as a fixed, floating element in your app and provide a toggle in the corner of the screen to show and hide the devtools. This toggle state will be stored and remembered in localStorage across reloads.
+
+Place the following code as high in your Preact app as you can. The closer it is to the root of the page, the better it will work!
+
+```tsx
+import { PreactQueryDevtools } from '@tanstack/preact-query-devtools'
+
+function App() {
+  return (
+    <QueryClientProvider client={queryClient}>
+      {/* The rest of your application */}
+      <PreactQueryDevtools initialIsOpen={false} />
+    </QueryClientProvider>
+  )
+}
+```
+
+### Options
+
+- `initialIsOpen: boolean`
+  - Set this `true` if you want the dev tools to default to being open
+- `buttonPosition?: "top-left" | "top-right" | "bottom-left" | "bottom-right"`
+  - Defaults to `bottom-right`
+  - The position of the Preact Query logo to open and close the devtools panel
+- `position?: "top" | "bottom" | "left" | "right"`
+  - Defaults to `bottom`
+  - The position of the Preact Query devtools panel
+- `client?: QueryClient`,
+  - Use this to use a custom QueryClient. Otherwise, the one from the nearest context will be used.
+- `errorTypes?: { name: string; initializer: (query: Query) => TError}`
+  - Use this to predefine some errors that can be triggered on your queries. Initializer will be called (with the specific query) when that error is toggled on from the UI. It must return an Error.
+- `styleNonce?: string`
+  - Use this to pass a nonce to the style tag that is added to the document head. This is useful if you are using a Content Security Policy (CSP) nonce to allow inline styles.
+- `shadowDOMTarget?: ShadowRoot`
+  - Default behavior will apply the devtool's styles to the head tag within the DOM.
+  - Use this to pass a shadow DOM target to the devtools so that the styles will be applied within the shadow DOM instead of within the head tag in the light DOM.

docs/framework/preact/plugins/createAsyncStoragePersister.md

@@ -0,0 +1,6 @@
+---
+id: createAsyncStoragePersister
+title: createAsyncStoragePersister
+ref: docs/framework/react/plugins/createAsyncStoragePersister.md
+replace: { 'react-query': 'preact-query' }
+---

docs/framework/preact/plugins/createPersister.md

@@ -0,0 +1,6 @@
+---
+id: createPersister
+title: experimental_createPersister
+ref: docs/framework/react/plugins/createPersister.md
+replace: { 'react-query': 'preact-query' }
+---

docs/framework/preact/plugins/createSyncStoragePersister.md

@@ -0,0 +1,6 @@
+---
+id: createSyncStoragePersister
+title: createSyncStoragePersister
+ref: docs/framework/react/plugins/createSyncStoragePersister.md
+replace: { 'react-query': 'preact-query' }
+---

docs/framework/react/guides/caching.md

@@ -19,7 +19,7 @@ Let's assume we are using the default `gcTime` of **5 minutes** and the default
 - A new instance of `useQuery({ queryKey: ['todos'], queryFn: fetchTodos })` mounts.
   - Since no other queries have been made with the `['todos']` query key, this query will show a hard loading state and make a network request to fetch the data.
   - When the network request has completed, the returned data will be cached under the `['todos']` key.
-  - The hook will mark the data as stale after the configured `staleTime` (defaults to `0`, or immediately).
+  - The data will be marked as stale after the configured `staleTime` (defaults to `0`, or immediately).
 - A second instance of `useQuery({ queryKey: ['todos'], queryFn: fetchTodos })` mounts elsewhere.
   - Since the cache already has data for the `['todos']` key from the first query, that data is immediately returned from the cache.
   - The new instance triggers a new network request using its query function.

docs/framework/react/guides/important-defaults.md

@@ -32,9 +32,13 @@ Out of the box, TanStack Query is configured with **aggressive but sane** defaul
 
   > To change this, you can alter the default `retry` and `retryDelay` options for queries to something other than `3` and the default exponential backoff function.
 
+[//]: # 'StructuralSharing'
+
 - Query results by default are **structurally shared to detect if data has actually changed** and if not, **the data reference remains unchanged** to better help with value stabilization with regards to useMemo and useCallback. If this concept sounds foreign, then don't worry about it! 99.9% of the time you will not need to disable this and it makes your app more performant at zero cost to you.
 
-  > Structural sharing only works with JSON-compatible values, any other value types will always be considered as changed. If you are seeing performance issues because of large responses for example, you can disable this feature with the `config.structuralSharing` flag. If you are dealing with non-JSON compatible values in your query responses and still want to detect if data has changed or not, you can provide your own custom function as `config.structuralSharing` to compute a value from the old and new responses, retaining references as required.
+[//]: # 'StructuralSharing'
+
+> Structural sharing only works with JSON-compatible values, any other value types will always be considered as changed. If you are seeing performance issues because of large responses for example, you can disable this feature with the `config.structuralSharing` flag. If you are dealing with non-JSON compatible values in your query responses and still want to detect if data has changed or not, you can provide your own custom function as `config.structuralSharing` to compute a value from the old and new responses, retaining references as required.
 
 [//]: # 'Materials'
 

docs/framework/react/guides/mutations.md

@@ -340,11 +340,14 @@ queryClient.resumePausedMutations()
 ```
 
 [//]: # 'Example10'
+[//]: # 'PersistOfflineIntro'
 
 ### Persisting Offline mutations
 
 If you persist offline mutations with the [persistQueryClient plugin](../plugins/persistQueryClient.md), mutations cannot be resumed when the page is reloaded unless you provide a default mutation function.
 
+[//]: # 'PersistOfflineIntro'
+
 This is a technical limitation. When persisting to an external storage, only the state of mutations is persisted, as functions cannot be serialized. After hydration, the component that triggers the mutation might not be mounted, so calling `resumePausedMutations` might yield an error: `No mutationFn found`.
 
 [//]: # 'Example11'
@@ -385,9 +388,12 @@ export default function App() {
 ```
 
 [//]: # 'Example11'
+[//]: # 'OfflineExampleLink'
 
 We also have an extensive [offline example](../examples/offline) that covers both queries and mutations.
 
+[//]: # 'OfflineExampleLink'
+
 ## Mutation Scopes
 
 Per default, all mutations run in parallel - even if you invoke `.mutate()` of the same mutation multiple times. Mutations can be given a `scope` with an `id` to avoid that. All mutations with the same `scope.id` will run in serial, which means when they are triggered, they will start in `isPaused: true` state if there is already a mutation for that scope in progress. They will be put into a queue and will automatically resume once their time in the queue has come.