feat: v3 support (#81)

* add react-query to devDependencies and bump to latest beta

* replaced useQueryCache with useQueryClient

and extracted the queryCache from the queryClient
I also removed the fallback because with v3, you always need to wrap your app in a QueryClientProvider

* updatedAt was renamed to dataUpdatedAt in v3

* queryCache.subscribe passes a query, not a queryCache

but we don't really care about the argument because we have the queryCache in the closure

* remove the activeQuery directly from the queryCache

BREAKING CHANGE: Uses the new React Query v3 API

Author: TkDodo

package.json

@@ -31,7 +31,7 @@
   },
   "peerDependencies": {
     "react": "^16.6.3 || ^17.0.0",
-    "react-query": "^2.0.0"
+    "react-query": "^3.2.0-beta.23"
   },
   "devDependencies": {
     "@babel/core": "^7.9.0",
@@ -65,6 +65,7 @@
     "prettier": "^1.19.1",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
+    "react-query": "^3.2.0-beta.23",
     "rollup": "^1.31.1",
     "rollup-plugin-babel": "^4.3.2",
     "rollup-plugin-commonjs": "^10.1.0",

src/index.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import match from 'match-sorter'
-import { queryCache as cache, useQueryCache } from 'react-query'
+import { useQueryClient } from 'react-query'
 import useLocalStorage from './useLocalStorage'
 import { useSafeState, isStale } from './utils'
 
@@ -215,7 +215,8 @@ export const ReactQueryDevtoolsPanel = React.forwardRef(
   function ReactQueryDevtoolsPanel(props, ref) {
     const { setIsOpen, ...panelProps } = props
 
-    const queryCache = useQueryCache ? useQueryCache() : cache
+    const queryClient = useQueryClient()
+    const queryCache = queryClient.getQueryCache()
 
     const [sort, setSort] = useLocalStorage(
       'reactQueryDevtoolsSortFn',
@@ -270,7 +271,7 @@ export const ReactQueryDevtoolsPanel = React.forwardRef(
     }
 
     const [unsortedQueries, setUnsortedQueries] = useSafeState(
-      Object.values(queryCache.queries)
+      Object.values(queryCache.getAll())
     )
 
     const [activeQueryHash, setActiveQueryHash] = useLocalStorage(
@@ -306,8 +307,8 @@ export const ReactQueryDevtoolsPanel = React.forwardRef(
     ).length
 
     React.useEffect(() => {
-      return queryCache.subscribe(queryCache => {
-        setUnsortedQueries(Object.values(queryCache.queries))
+      return queryCache.subscribe(() => {
+        setUnsortedQueries(Object.values(queryCache.getAll()))
       })
     }, [sort, sortFn, sortDesc, queryCache, setUnsortedQueries])
 
@@ -564,7 +565,7 @@ export const ReactQueryDevtoolsPanel = React.forwardRef(
                 >
                   Last Updated:{' '}
                   <Code>
-                    {new Date(activeQuery.state.updatedAt).toLocaleTimeString()}
+                    {new Date(activeQuery.state.dataUpdatedAt).toLocaleTimeString()}
                   </Code>
                 </div>
               </div>
@@ -595,7 +596,7 @@ export const ReactQueryDevtoolsPanel = React.forwardRef(
                 </Button>{' '}
                 <Button
                   onClick={() =>
-                    queryCache.removeQueries(q => q === activeQuery)
+                    queryCache.remove(activeQuery)
                   }
                   style={{
                     background: theme.danger,

yarn.lock

@@ -1448,6 +1448,13 @@
   dependencies:
     regenerator-runtime "^0.13.2"
 
+"@babel/runtime@^7.5.5":
+  version "7.12.5"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.12.5.tgz#410e7e487441e1b360c29be715d870d9b985882e"
+  integrity sha512-plcc+hbExy3McchJCEQG3knOsuh3HH+Prx1P6cLIkET/0dLuQDEnrT+s27Axgc9bqfsmNUNHfscgMUdBpC9xfg==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/runtime@^7.8.4":
   version "7.10.3"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.10.3.tgz#670d002655a7c366540c67f6fd3342cd09500364"
@@ -6246,6 +6253,13 @@ react-is@^16.8.1, react-is@^16.8.4:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.0.tgz#0f37c3613c34fe6b37cd7f763a0d6293ab15c527"
   integrity sha512-GFMtL0vHkiBv9HluwNZTggSn/sCyEt9n02aM0dSAjGGyqyNlAyftYm4phPxdvCigG15JreC5biwxCgTAJZ7yAA==
 
+react-query@^3.2.0-beta.23:
+  version "3.2.0-beta.23"
+  resolved "https://registry.yarnpkg.com/react-query/-/react-query-3.2.0-beta.23.tgz#edba35b12c5ed42a37f287dc2c043729e9e6f3cd"
+  integrity sha512-98qwGUgcA/5CsByISNPSzfFmsUofjOE7TNbqqPG9zREjiI+Q0V2Xq3ojdvf01mdLdheNBc7hCJREgM5fBpg+Sg==
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+
 react@^16.12.0:
   version "16.13.0"
   resolved "https://registry.yarnpkg.com/react/-/react-16.13.0.tgz#d046eabcdf64e457bbeed1e792e235e1b9934cf7"