Merge branch 'main' into sc/whole-leech

Author: DamianOsipiuk

.all-contributorsrc

@@ -929,6 +929,10 @@
             {
               "label": "Shadow DOM",
               "to": "framework/react/examples/shadow-dom"
+            },
+            {
+              "label": "Devtools Embedded Panel",
+              "to": "framework/react/examples/devtools-panel"
             }
           ]
         },

docs/config.json

@@ -23,7 +23,7 @@ Most core web frameworks **do not** come with an opinionated way of fetching or
 
 While most traditional state management libraries are great for working with client state, they are **not so great at working with async or server state**. This is because **server state is totally different**. For starters, server state:
 
-- Is persisted remotely in a location you do not control or own
+- Is persisted remotely in a location you may not control or own
 - Requires asynchronous APIs for fetching and updating
 - Implies shared ownership and can be changed by other people without your knowledge
 - Can potentially become "out of date" in your applications if you're not careful
@@ -58,7 +58,7 @@ On a more technical note, Angular Query will likely:
 
 In the example below, you can see Angular Query in its most basic and simple form being used to fetch the GitHub stats for the TanStack Query GitHub project itself:
 
-[Open in CodeSandbox](https://codesandbox.io/s/github/tanstack/query/tree/main/examples/angular/simple)
+[Open in StackBlitz](https://stackblitz.com/github/TanStack/query/tree/main/examples/angular/simple)
 
 ```angular-ts
 import { AngularQueryDevtools } from '@tanstack/angular-query-devtools-experimental'
@@ -114,4 +114,4 @@ type Response = {
 
 ## You talked me into it, so what now?
 
-- Learn Angular Query at your own pace with our amazingly thorough [Walkthrough Guide](../installation) and [API Reference](../reference/injectQuery)
+- Learn Angular Query at your own pace with our amazingly thorough [Walkthrough Guide](../installation) and [API Reference](../reference/functions/injectquery)

docs/framework/angular/overview.md

@@ -83,7 +83,50 @@ function App() {
   - The position of the React 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}`
+- `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.
+
+## Embedded Mode
+
+Embedded mode will show the development tools as a fixed element in your application, so you can use our panel in your own development tools.
+
+Place the following code as high in your React app as you can. The closer it is to the root of the page, the better it will work!
+
+```tsx
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
+
+function App() {
+  const [isOpen, setIsOpen] = React.useState(false)
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      {/* The rest of your application */}
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+      >{`${isOpen ? 'Close' : 'Open'} the devtools panel`}</button>
+      {isOpen && <ReactQueryDevtoolsPanel onClose={() => setIsOpen(false)} />}
+    </QueryClientProvider>
+  )
+}
+```
+
+### Options
+
+- `style?: React.CSSProperties`
+  - Custom styles for the devtools panel
+  - Default: `{ height: '500px' }`
+  - Example: `{ height: '100%' }`
+  - Example: `{ height: '100%', width: '100%' }`
+- `onClose?: () => unknown`
+  - Callback function that is called when the devtools panel is closed
+- `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.

docs/framework/react/devtools.md

@@ -187,3 +187,7 @@ return (
 ```
 
 [//]: # 'Example7'
+
+## Limitations
+
+Cancelation does not work when working with `Suspense` hooks: `useSuspenseQuery`, `useSuspenseQueries` and `useSuspenseInfiniteQuery`.

docs/framework/react/guides/query-cancellation.md

@@ -24,3 +24,7 @@ Same object as [useInfiniteQuery](../useInfiniteQuery), except that:
 - `isPlaceholderData` is missing
 - `status` is always `success`
   - the derived flags are set accordingly.
+
+**Caveat**
+
+[Cancelation](../guides/query-cancellation.md) does not work.

docs/framework/react/reference/useSuspenseInfiniteQuery.md

@@ -25,6 +25,8 @@ Same structure as [useQueries](../useQueries), except that for each `query`:
 - `status` is always `success`
   - the derived flags are set accordingly.
 
-**Caveat**
+**Caveats**
 
 Keep in mind that the component will only re-mount after **all queries** have finished loading. Hence, if a query has gone stale in the time it took for all the queries to complete, it will be fetched again at re-mount. To avoid this, make sure to set a high enough `staleTime`.
+
+[Cancelation](../guides/query-cancellation.md) does not work.

docs/framework/react/reference/useSuspenseQueries.md

@@ -23,3 +23,7 @@ Same object as [useQuery](../useQuery), except that:
 - `isPlaceholderData` is missing
 - `status` is always `success`
   - the derived flags are set accordingly.
+
+**Caveat**
+
+[Cancelation](../guides/query-cancellation.md) does not work.