diff --git a/package.json b/package.json index 70dc34b..c775744 100644 --- a/package.json +++ b/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", diff --git a/src/index.js b/src/index.js index f44c2c1..d0fd1bd 100644 --- a/src/index.js +++ b/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:{' '} - {new Date(activeQuery.state.updatedAt).toLocaleTimeString()} + {new Date(activeQuery.state.dataUpdatedAt).toLocaleTimeString()} @@ -595,7 +596,7 @@ export const ReactQueryDevtoolsPanel = React.forwardRef( {' '}