fix: devtools panel, examples and docs

TanStack · Sep 2, 2024 · 2bf101d · 2bf101d
1 parent 8774bc4
commit 2bf101d
Show file tree

Hide file tree

Showing 14 changed files with 312 additions and 174 deletions.
diff --git a/docs/config.json b/docs/config.json
@@ -929,6 +929,10 @@
             {
               "label": "Shadow DOM",
               "to": "framework/react/examples/shadow-dom"
+            },
+            {
+              "label": "Devtools Embedded Panel",
+              "to": "framework/react/examples/devtools-panel"
             }
           ]
         },

diff --git a/docs/framework/react/devtools.md b/docs/framework/react/devtools.md
@@ -83,7 +83,7 @@ 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.
@@ -106,23 +106,27 @@ function App() {
   return (
     <QueryClientProvider client={queryClient}>
       {/* The rest of your application */}
-      <button onClick={() => setIsOpen(!isOpen)}>{`${isOpen ? 'Close' : 'Open'} the devtools panel`}</button>
-      <ReactQueryDevtoolsPanel isOpen={isOpen} />
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+      >{`${isOpen ? 'Close' : 'Open'} the devtools panel`}</button>
+      {isOpen && <ReactQueryDevtoolsPanel onClose={() => setIsOpen(false)}/>}
     </QueryClientProvider>
   )
 }
 ```
 
 ### Options
 
-- `isOpen: Boolean`
-  - Defaults to `false`
-- `position?: "top" | "bottom" | "left" | "right"`
-  - Defaults to `bottom`
-  - The position of the React Query devtools panel
+- `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}`
+- `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.

diff --git a/examples/react/devtools-panel/package.json b/examples/react/devtools-panel/package.json
@@ -8,8 +8,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@tanstack/react-query": "^5.52.0",
-    "@tanstack/react-query-devtools": "^5.52.0",
+    "@tanstack/react-query": "^5.53.2",
+    "@tanstack/react-query-devtools": "^5.53.2",
     "react": "19.0.0-rc-4c2e457c7c-20240522",
     "react-dom": "19.0.0-rc-4c2e457c7c-20240522"
   },

diff --git a/examples/react/devtools-panel/src/index.tsx b/examples/react/devtools-panel/src/index.tsx
@@ -14,15 +14,17 @@ export default function App() {
 
   return (
     <QueryClientProvider client={queryClient}>
-      <button onClick={() => setIsOpen(!isOpen)}>{`${isOpen ? 'Close' : 'Open'} the devtools panel`}</button>
-      <ReactQueryDevtoolsPanel isOpen={isOpen} />
-      <Example />
+      <Example/>
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+      >{`${isOpen ? 'Close' : 'Open'} the devtools panel`}</button>
+      {isOpen && <ReactQueryDevtoolsPanel onClose={() => setIsOpen(false)}/>}
     </QueryClientProvider>
   )
 }
 
 function Example() {
-  const { isPending, error, data, isFetching } = useQuery({
+  const {isPending, error, data, isFetching} = useQuery({
     queryKey: ['repoData'],
     queryFn: async () => {
       const response = await fetch(
@@ -37,7 +39,11 @@ function Example() {
   if (error) return 'An error has occurred: ' + error.message
 
   return (
-    <div>
+    <div
+      style={{
+        paddingBottom: 20,
+      }}
+    >
       <h1>{data.full_name}</h1>
       <p>{data.description}</p>
       <strong>👀 {data.subscribers_count}</strong>{' '}