@tanstack/react-query-devtools 4.24.10 → 5.0.0-alpha.0

package/build/umd/index.production.js

@@ -1,2 +1,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).ReactQueryDevtools={})}(this,(function(e){"use strict";e.ReactQueryDevtools=function(){return null},e.ReactQueryDevtoolsPanel=function(){return null},Object.defineProperty(e,"__esModule",{value:!0})}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).ReactQueryDevtools={})}(this,(function(e){"use strict";e.ReactQueryDevtools=function(){return null},e.ReactQueryDevtoolsPanel=function(){return null}}));
 //# sourceMappingURL=index.production.js.map

package/build/umd/index.production.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.production.js","sources":["../../src/index.ts"],"sourcesContent":["import * as devtools from './devtools'\n\nexport const ReactQueryDevtools: typeof devtools['ReactQueryDevtools'] =\n  process.env.NODE_ENV !== 'development'\n    ? function () {\n        return null\n      }\n    : devtools.ReactQueryDevtools\n\nexport const ReactQueryDevtoolsPanel: typeof devtools['ReactQueryDevtoolsPanel'] =\n  process.env.NODE_ENV !== 'development'\n    ? (function () {\n        return null\n      } as any)\n    : devtools.ReactQueryDevtoolsPanel\n"],"names":[],"mappings":"+QAIM,WACE,OAAO,gCAMR,WACC,OAAO"}
+{"version":3,"file":"index.production.js","sources":["../../src/index.ts"],"sourcesContent":["import * as devtools from './devtools'\n\nexport const ReactQueryDevtools: (typeof devtools)['ReactQueryDevtools'] =\n  process.env.NODE_ENV !== 'development'\n    ? function () {\n        return null\n      }\n    : devtools.ReactQueryDevtools\n\nexport const ReactQueryDevtoolsPanel: (typeof devtools)['ReactQueryDevtoolsPanel'] =\n  process.env.NODE_ENV !== 'development'\n    ? (function () {\n        return null\n      } as any)\n    : devtools.ReactQueryDevtoolsPanel\n"],"names":[],"mappings":"+QAIM,WACE,OAAO,gCAMR,WACC,OAAO"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/react-query-devtools",
-  "version": "4.24.10",
+  "version": "5.0.0-alpha.0",
   "description": "Developer tools to interact with and visualize the TanStack/react-query cache",
   "author": "tannerlinsley",
   "license": "MIT",
@@ -40,23 +40,19 @@
   "devDependencies": {
     "@types/react": "^18.0.14",
     "@types/react-dom": "^18.0.5",
-    "@types/use-sync-external-store": "^0.0.3",
     "react": "^18.2.0",
-    "react-17": "npm:react@^17.0.2",
     "react-dom": "^18.2.0",
-    "react-dom-17": "npm:react-dom@^17.0.2",
     "react-error-boundary": "^3.1.4",
-    "@tanstack/react-query": "4.24.10"
+    "@tanstack/react-query": "5.0.0-alpha.0"
   },
   "dependencies": {
     "@tanstack/match-sorter-utils": "^8.7.0",
-    "superjson": "^1.10.0",
-    "use-sync-external-store": "^1.2.0"
+    "superjson": "^1.10.0"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "@tanstack/react-query": "4.24.10"
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "@tanstack/react-query": "5.0.0-alpha.0"
   },
   "scripts": {
     "clean": "rimraf ./build",

package/src/Explorer.tsx

@@ -183,16 +183,16 @@ const CopiedCopier = () => (
   </span>
 )
 
-type Entry = {
+type EntryType = {
   label: string
 }
 
 type RendererProps = {
-  handleEntry: (entry: Entry) => JSX.Element
+  handleEntry: (entry: EntryType) => JSX.Element
   label?: string
   value: unknown
-  subEntries: Entry[]
-  subEntryPages: Entry[][]
+  subEntries: EntryType[]
+  subEntryPages: EntryType[][]
   type: string
   expanded: boolean
   copyable: boolean

package/src/__tests__/Explorer.test.tsx

@@ -90,6 +90,9 @@ describe('Explorer', () => {
     })
 
     it('when the copy button is clicked but there is an error, show error state', async () => {
+      const consoleMock = jest.spyOn(console, 'error')
+      consoleMock.mockImplementation(() => undefined)
+
       // Mock clipboard with error state
       Object.defineProperty(navigator, 'clipboard', {
         value: {
@@ -117,6 +120,8 @@ describe('Explorer', () => {
 
       // Check that it has failed
       await screen.findByLabelText('Failed copying to clipboard')
+      expect(consoleMock).toHaveBeenCalled()
+      consoleMock.mockRestore()
     })
   })
 

package/src/__tests__/devtools.test.tsx

@@ -1,8 +1,6 @@
 import * as React from 'react'
 import { fireEvent, screen, waitFor, act } from '@testing-library/react'
-import { ErrorBoundary } from 'react-error-boundary'
 import '@testing-library/jest-dom'
-import type { QueryClient } from '@tanstack/react-query'
 import { useQuery } from '@tanstack/react-query'
 import { defaultPanelSize, sortFns } from '../utils'
 import {
@@ -12,13 +10,6 @@ import {
   createQueryClient,
 } from './utils'
 
-// TODO: This should be removed with the types for react-error-boundary get updated.
-declare module 'react-error-boundary' {
-  interface ErrorBoundaryPropsWithFallback {
-    children: any
-  }
-}
-
 Object.defineProperty(window, 'matchMedia', {
   writable: true,
   value: jest.fn().mockImplementation((query: string) => ({
@@ -44,9 +35,12 @@ describe('ReactQueryDevtools', () => {
     const onToggleClick = jest.fn()
 
     function Page() {
-      const { data = 'default' } = useQuery(['check'], async () => {
-        await sleep(10)
-        return 'test'
+      const { data = 'default' } = useQuery({
+        queryKey: ['check'],
+        queryFn: async () => {
+          await sleep(10)
+          return 'test'
+        },
       })
 
       return (
@@ -118,9 +112,12 @@ describe('ReactQueryDevtools', () => {
     const { queryClient } = createQueryClient()
 
     function Page() {
-      const { data = 'default' } = useQuery(['check'], async () => {
-        await sleep(10)
-        return 'test'
+      const { data = 'default' } = useQuery({
+        queryKey: ['check'],
+        queryFn: async () => {
+          await sleep(10)
+          return 'test'
+        },
       })
 
       return (
@@ -151,14 +148,14 @@ describe('ReactQueryDevtools', () => {
     const { queryClient, queryCache } = createQueryClient()
 
     function Page() {
-      const { data = 'default' } = useQuery(
-        ['check'],
-        async () => {
+      const { data = 'default' } = useQuery({
+        queryKey: ['check'],
+        queryFn: async () => {
           await sleep(100)
           return 'test'
         },
-        { staleTime: 300 },
-      )
+        staleTime: 300,
+      })
 
       return (
         <div>
@@ -193,7 +190,7 @@ describe('ReactQueryDevtools', () => {
       screen.getByRole('button', { name: /open react query devtools/i }),
     )
 
-    const currentQuery = queryCache.find(['check'])
+    const currentQuery = queryCache.find({ queryKey: ['check'] })
 
     // When the query is fetching then expect number of
     // fetching queries to be 1
@@ -243,9 +240,12 @@ describe('ReactQueryDevtools', () => {
     const { queryClient, queryCache } = createQueryClient()
 
     function Page() {
-      const { data = 'default' } = useQuery(['check'], async () => {
-        await sleep(10)
-        return 'test'
+      const { data = 'default' } = useQuery({
+        queryKey: ['check'],
+        queryFn: async () => {
+          await sleep(10)
+          return 'test'
+        },
       })
 
       return (
@@ -261,7 +261,7 @@ describe('ReactQueryDevtools', () => {
       screen.getByRole('button', { name: /open react query devtools/i }),
     )
 
-    const currentQuery = queryCache.find(['check'])
+    const currentQuery = queryCache.find({ queryKey: ['check'] })
 
     await screen.findByText(getByTextContent(`1${currentQuery?.queryHash}`))
 
@@ -278,19 +278,28 @@ describe('ReactQueryDevtools', () => {
     const { queryClient, queryCache } = createQueryClient()
 
     function Page() {
-      const fooResult = useQuery(['foo'], async () => {
-        await sleep(10)
-        return 'foo-result'
+      const fooResult = useQuery({
+        queryKey: ['foo'],
+        queryFn: async () => {
+          await sleep(10)
+          return 'foo-result'
+        },
       })
 
-      const barResult = useQuery(['bar'], async () => {
-        await sleep(10)
-        return 'bar-result'
+      const barResult = useQuery({
+        queryKey: ['bar'],
+        queryFn: async () => {
+          await sleep(10)
+          return 'bar-result'
+        },
       })
 
-      const bazResult = useQuery(['baz'], async () => {
-        await sleep(10)
-        return 'baz-result'
+      const bazResult = useQuery({
+        queryKey: ['baz'],
+        queryFn: async () => {
+          await sleep(10)
+          return 'baz-result'
+        },
       })
 
       return (
@@ -308,9 +317,12 @@ describe('ReactQueryDevtools', () => {
       screen.getByRole('button', { name: /open react query devtools/i }),
     )
 
-    const fooQueryHash = queryCache.find(['foo'])?.queryHash ?? 'invalid hash'
-    const barQueryHash = queryCache.find(['bar'])?.queryHash ?? 'invalid hash'
-    const bazQueryHash = queryCache.find(['baz'])?.queryHash ?? 'invalid hash'
+    const fooQueryHash =
+      queryCache.find({ queryKey: ['foo'] })?.queryHash ?? 'invalid hash'
+    const barQueryHash =
+      queryCache.find({ queryKey: ['bar'] })?.queryHash ?? 'invalid hash'
+    const bazQueryHash =
+      queryCache.find({ queryKey: ['baz'] })?.queryHash ?? 'invalid hash'
 
     await screen.findByText(fooQueryHash)
     screen.getByText(barQueryHash)
@@ -333,16 +345,14 @@ describe('ReactQueryDevtools', () => {
 
     function Page() {
       const [enabled, setEnabled] = React.useState(false)
-      const { data } = useQuery(
-        ['key'],
-        async () => {
+      const { data } = useQuery({
+        queryKey: ['key'],
+        queryFn: async () => {
           await sleep(10)
           return 'test'
         },
-        {
-          enabled,
-        },
-      )
+        enabled,
+      })
 
       return (
         <div>
@@ -367,7 +377,9 @@ describe('ReactQueryDevtools', () => {
     const { queryClient } = createQueryClient()
 
     function Page() {
-      const { data } = useQuery(['key'], () => Promise.resolve('test'), {
+      const { data } = useQuery({
+        queryKey: ['key'],
+        queryFn: () => Promise.resolve('test'),
         enabled: false,
       })
 
@@ -405,9 +417,12 @@ describe('ReactQueryDevtools', () => {
     let count = 0
 
     function App() {
-      const { data, fetchStatus } = useQuery(['key'], () => {
-        count++
-        return Promise.resolve('test')
+      const { data, fetchStatus } = useQuery({
+        queryKey: ['key'],
+        queryFn: () => {
+          count++
+          return Promise.resolve('test')
+        },
       })
 
       return (
@@ -458,30 +473,33 @@ describe('ReactQueryDevtools', () => {
     const { queryClient, queryCache } = createQueryClient()
 
     function Page() {
-      const query1Result = useQuery(['query-1'], async () => {
-        await sleep(20)
-        return 'query-1-result'
+      const query1Result = useQuery({
+        queryKey: ['query-1'],
+        queryFn: async () => {
+          await sleep(20)
+          return 'query-1-result'
+        },
       })
 
-      const query3Result = useQuery(
-        ['query-3'],
-        async () => {
+      const query3Result = useQuery({
+        queryKey: ['query-3'],
+        queryFn: async () => {
           await sleep(10)
           return 'query-3-result'
         },
-        { staleTime: Infinity, enabled: typeof query1Result.data === 'string' },
-      )
+        staleTime: Infinity,
+        enabled: typeof query1Result.data === 'string',
+      })
 
-      const query2Result = useQuery(
-        ['query-2'],
-        async () => {
+      const query2Result = useQuery({
+        queryKey: ['query-2'],
+        queryFn: async () => {
           await sleep(10)
           return 'query-2-result'
         },
-        {
-          enabled: typeof query3Result.data === 'string',
-        },
-      )
+
+        enabled: typeof query3Result.data === 'string',
+      })
 
       return (
         <div>
@@ -498,9 +516,12 @@ describe('ReactQueryDevtools', () => {
       screen.getByRole('button', { name: /open react query devtools/i }),
     )
 
-    const query1Hash = queryCache.find(['query-1'])?.queryHash ?? 'invalid hash'
-    const query2Hash = queryCache.find(['query-2'])?.queryHash ?? 'invalid hash'
-    const query3Hash = queryCache.find(['query-3'])?.queryHash ?? 'invalid hash'
+    const query1Hash =
+      queryCache.find({ queryKey: ['query-1'] })?.queryHash ?? 'invalid hash'
+    const query2Hash =
+      queryCache.find({ queryKey: ['query-2'] })?.queryHash ?? 'invalid hash'
+    const query3Hash =
+      queryCache.find({ queryKey: ['query-3'] })?.queryHash ?? 'invalid hash'
 
     const sortSelect = screen.getByLabelText(/sort queries/i)
     let queries = []
@@ -563,9 +584,12 @@ describe('ReactQueryDevtools', () => {
     const { queryClient } = createQueryClient()
 
     function Page() {
-      const { data = 'default' } = useQuery(['check'], async () => {
-        await sleep(10)
-        return 'test'
+      const { data = 'default' } = useQuery({
+        queryKey: ['check'],
+        queryFn: async () => {
+          await sleep(10)
+          return 'test'
+        },
       })
 
       return (
@@ -603,9 +627,12 @@ describe('ReactQueryDevtools', () => {
     const { queryClient } = createQueryClient()
 
     function Page() {
-      const { data = 'default' } = useQuery(['check'], async () => {
-        await sleep(10)
-        return 'test'
+      const { data = 'default' } = useQuery({
+        queryKey: ['check'],
+        queryFn: async () => {
+          await sleep(10)
+          return 'test'
+        },
       })
 
       return (
@@ -632,9 +659,12 @@ describe('ReactQueryDevtools', () => {
     const { queryClient } = createQueryClient()
 
     function Page() {
-      const { data = 'default' } = useQuery(['check'], async () => {
-        await sleep(10)
-        return 'test'
+      const { data = 'default' } = useQuery({
+        queryKey: ['check'],
+        queryFn: async () => {
+          await sleep(10)
+          return 'test'
+        },
       })
 
       return (
@@ -670,107 +700,14 @@ describe('ReactQueryDevtools', () => {
     await screen.findByRole('button', { name: /react query devtools/i })
   })
 
-  describe('with custom context', () => {
-    it('should render without error when the custom context aligns', async () => {
-      const context = React.createContext<QueryClient | undefined>(undefined)
-      const { queryClient } = createQueryClient()
-
-      function Page() {
-        const { data = 'default' } = useQuery(['check'], async () => 'test', {
-          context,
-        })
-
-        return (
-          <div>
-            <h1>{data}</h1>
-          </div>
-        )
-      }
-
-      renderWithClient(queryClient, <Page />, {
-        initialIsOpen: false,
-        context,
-      })
-
-      await screen.findByRole('button', { name: /open react query devtools/i })
-    })
-
-    it('should render with error when the custom context is not passed to useQuery', async () => {
-      const consoleErrorMock = jest.spyOn(console, 'error')
-      consoleErrorMock.mockImplementation(() => undefined)
-
-      const context = React.createContext<QueryClient | undefined>(undefined)
-      const { queryClient } = createQueryClient()
-
-      function Page() {
-        const { data = 'default' } = useQuery(['check'], async () => 'test', {
-          useErrorBoundary: true,
-        })
-
-        return (
-          <div>
-            <h1>{data}</h1>
-          </div>
-        )
-      }
-
-      const rendered = renderWithClient(
-        queryClient,
-        <ErrorBoundary fallbackRender={() => <div>error boundary</div>}>
-          <Page />
-        </ErrorBoundary>,
-        {
-          initialIsOpen: false,
-          context,
-        },
-      )
-
-      await waitFor(() => rendered.getByText('error boundary'))
-
-      consoleErrorMock.mockRestore()
-    })
-
-    it('should render with error when the custom context is not passed to ReactQueryDevtools', async () => {
-      const consoleErrorMock = jest.spyOn(console, 'error')
-      consoleErrorMock.mockImplementation(() => undefined)
-
-      const context = React.createContext<QueryClient | undefined>(undefined)
-      const { queryClient } = createQueryClient()
-
-      function Page() {
-        const { data = 'default' } = useQuery(['check'], async () => 'test', {
-          useErrorBoundary: true,
-          context,
-        })
-
-        return (
-          <div>
-            <h1>{data}</h1>
-          </div>
-        )
-      }
-
-      const rendered = renderWithClient(
-        queryClient,
-        <ErrorBoundary fallbackRender={() => <div>error boundary</div>}>
-          <Page />
-        </ErrorBoundary>,
-        {
-          initialIsOpen: false,
-        },
-      )
-
-      await waitFor(() => rendered.getByText('error boundary'))
-
-      consoleErrorMock.mockRestore()
-    })
-  })
-
   it('should render a menu to select panel position', async () => {
     const { queryClient } = createQueryClient()
 
     function Page() {
-      const { data = 'default' } = useQuery(['check'], async () => 'test')
+      const { data = 'default' } = useQuery({
+        queryKey: ['check'],
+        queryFn: async () => 'test',
+      })
 
       return (
         <div>
@@ -794,7 +731,10 @@ describe('ReactQueryDevtools', () => {
     const { queryClient } = createQueryClient()
 
     function Page() {
-      const { data = 'default' } = useQuery(['check'], async () => 'test')
+      const { data = 'default' } = useQuery({
+        queryKey: ['check'],
+        queryFn: async () => 'test',
+      })
 
       return (
         <div>
@@ -827,7 +767,10 @@ describe('ReactQueryDevtools', () => {
     const { queryClient } = createQueryClient()
 
     function Page() {
-      const { data = 'default' } = useQuery(['check'], async () => 'test')
+      const { data = 'default' } = useQuery({
+        queryKey: ['check'],
+        queryFn: async () => 'test',
+      })
 
       return (
         <div>
@@ -869,7 +812,10 @@ describe('ReactQueryDevtools', () => {
     const { queryClient } = createQueryClient()
 
     function Page() {
-      const { data = 'default' } = useQuery(['check'], async () => 'test')
+      const { data = 'default' } = useQuery({
+        queryKey: ['check'],
+        queryFn: async () => 'test',
+      })
 
       return (
         <div>

package/src/__tests__/utils.tsx

@@ -15,7 +15,7 @@ export function renderWithClient(
   renderOptions?: RenderOptions,
 ): ReturnType<typeof render> {
   const { rerender, ...result } = render(
-    <QueryClientProvider client={client} context={devtoolsOptions.context}>
+    <QueryClientProvider client={client}>
       <ReactQueryDevtools {...devtoolsOptions} />
       {ui}
     </QueryClientProvider>,
@@ -25,7 +25,7 @@ export function renderWithClient(
     ...result,
     rerender: (rerenderUi: React.ReactElement) =>
       rerender(
-        <QueryClientProvider client={client} context={devtoolsOptions.context}>
+        <QueryClientProvider client={client}>
           <ReactQueryDevtools {...devtoolsOptions} />
           {rerenderUi}
         </QueryClientProvider>,