Switch to @tanstack/react-query

components/providers/QueryProvider.jsx

@@ -1,19 +1,11 @@
-import {
-  QueryClient,
-  QueryClientProvider,
-  QueryCache,
-  MutationCache,
-} from "react-query";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 
 /**
  * Sets up the QueryClientProvider from react-query.
- * @desc See: https://react-query.tanstack.com/reference/QueryClientProvider#_top
+ * @desc See: https://tanstack.com/query/v4/docs/react/reference/QueryClientProvider
  */
 export function QueryProvider({ children }) {
-  const client = new QueryClient({
-    queryCache: new QueryCache(),
-    mutationCache: new MutationCache(),
-  });
+  const client = new QueryClient();
 
   return <QueryClientProvider client={client}>{children}</QueryClientProvider>;
 }

hooks/useAppQuery.js

@@ -1,18 +1,18 @@
 import { useAuthenticatedFetch } from "./useAuthenticatedFetch";
 import { useMemo } from "react";
-import { useQuery } from "react-query";
+import { useQuery } from "@tanstack/react-query";
 
 /**
  * A hook for querying your custom app data.
- * @desc A thin wrapper around useAuthenticatedFetch and react-query's useQuery.
+ * @desc A thin wrapper around useAuthenticatedFetch and React Query's useQuery.
  *
  * @param {Object} options - The options for your query. Accepts 3 keys:
  *
  * 1. url: The URL to query. E.g: /api/widgets/1`
  * 2. fetchInit: The init options for fetch.  See: https://developer.mozilla.org/en-US/docs/Web/API/fetch#parameters
- * 3. reactQueryOptions: The options for `useQuery`. See: https://react-query.tanstack.com/reference/useQuery
+ * 3. reactQueryOptions: The options for `useQuery`. See: https://tanstack.com/query/v4/docs/react/reference/useQuery
  *
- * @returns Return value of useQuery.  See: https://react-query.tanstack.com/reference/useQuery.
+ * @returns Return value of useQuery.  See: https://tanstack.com/query/v4/docs/react/reference/useQuery.
  */
 export const useAppQuery = ({ url, fetchInit = {}, reactQueryOptions }) => {
   const authenticatedFetch = useAuthenticatedFetch();
@@ -23,7 +23,9 @@ export const useAppQuery = ({ url, fetchInit = {}, reactQueryOptions }) => {
     };
   }, [url, JSON.stringify(fetchInit)]);
 
-  return useQuery(url, fetch, {
+  return useQuery({
+    queryKey: [url],
+    queryFn: fetch,
     ...reactQueryOptions,
     refetchOnWindowFocus: false,
   });

package.json

@@ -20,10 +20,10 @@
     "@shopify/app-bridge-utils": "^3.1.0",
     "@shopify/polaris": "^10.27.2",
     "@shopify/stylelint-polaris": "^5.1.0",
+    "@tanstack/react-query": "^4.26.1",
     "@vitejs/plugin-react": "1.2.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-query": "^3.34.19",
     "react-router-dom": "^6.3.0",
     "vite": "^2.8.6"
   },