improve react-query examples and add rq dev tools

Author: KevinVandy

apps/material-react-table-docs/examples/dynamic-columns/sandbox/package-lock.json

@@ -15,6 +15,7 @@
     "@mui/icons-material": "^6.2.1",
     "@mui/material": "^6.2.1",
     "@tanstack/react-query": "^5.62.8",
+    "@tanstack/react-query-devtools": "^5.62.8",
     "material-react-table": "^3.1.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"

apps/material-react-table-docs/examples/dynamic-columns/sandbox/package.json

@@ -1,4 +1,4 @@
-import { useMemo, useState } from 'react';
+import { lazy, Suspense, useMemo, useState } from 'react';
 import {
   MaterialReactTable,
   useMaterialReactTable,
@@ -11,9 +11,9 @@ import {
 import { IconButton, Tooltip } from '@mui/material';
 import RefreshIcon from '@mui/icons-material/Refresh';
 import {
+  keepPreviousData,
   QueryClient,
   QueryClientProvider,
-  keepPreviousData,
   useQuery,
 } from '@tanstack/react-query'; //note: this is TanStack React Query V5
 
@@ -68,15 +68,16 @@ const Example = () => {
     refetch,
   } = useQuery<UserApiResponse>({
     queryKey: [
-      'table-data',
-      columnFilters, //refetch when columnFilters changes
-      globalFilter, //refetch when globalFilter changes
-      pagination.pageIndex, //refetch when pagination.pageIndex changes
-      pagination.pageSize, //refetch when pagination.pageSize changes
-      sorting, //refetch when sorting changes
+      'users-list',
+      {
+        columnFilters, //refetch when columnFilters changes
+        globalFilter, //refetch when globalFilter changes
+        pagination, //refetch when pagination changes
+        sorting, //refetch when sorting changes
+      },
     ],
     queryFn: async () => {
-      const fetchURL = new URL('/api/data', location.origin);
+      const fetchURL = new URL('/api/data', location.origin); // nextjs api route
 
       //read our state and pass it to the API as query params
       fetchURL.searchParams.set(
@@ -165,13 +166,24 @@ const Example = () => {
   return <MaterialReactTable table={table} />;
 };
 
-const queryClient = new QueryClient();
-
-const ExampleWithReactQueryProvider = () => (
-  //App.tsx or AppProviders file. Don't just wrap this component with QueryClientProvider! Wrap your whole App!
-  <QueryClientProvider client={queryClient}>
-    <Example />
-  </QueryClientProvider>
+//react query setup in App.tsx
+const ReactQueryDevtoolsProduction = lazy(() =>
+  import('@tanstack/react-query-devtools/build/modern/production.js').then(
+    (d) => ({
+      default: d.ReactQueryDevtools,
+    }),
+  ),
 );
 
-export default ExampleWithReactQueryProvider;
+const queryClient = new QueryClient();
+
+export default function App() {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <Example />
+      <Suspense fallback={null}>
+        <ReactQueryDevtoolsProduction />
+      </Suspense>
+    </QueryClientProvider>
+  );
+}

apps/material-react-table-docs/examples/dynamic-columns/sandbox/src/TS.tsx

@@ -16,6 +16,7 @@
     "@mui/material": "^6.2.1",
     "@mui/x-date-pickers": "^7.23.3",
     "@tanstack/react-query": "^5.62.8",
+    "@tanstack/react-query-devtools": "^5.62.8",
     "dayjs": "^1.11.13",
     "material-react-table": "^3.1.0",
     "react": "^19.0.0",

apps/material-react-table-docs/examples/editing-crud-cell/sandbox/package-lock.json

@@ -1,4 +1,4 @@
-import { useMemo, useState } from 'react';
+import { lazy, Suspense, useMemo, useState } from 'react';
 import {
   MaterialReactTable,
   // createRow,
@@ -334,16 +334,27 @@ function useDeleteUser() {
   });
 }
 
-const queryClient = new QueryClient();
-
-const ExampleWithProviders = () => (
-  //Put this with your other react-query providers near root of your app
-  <QueryClientProvider client={queryClient}>
-    <Example />
-  </QueryClientProvider>
+//react query setup in App.tsx
+const ReactQueryDevtoolsProduction = lazy(() =>
+  import('@tanstack/react-query-devtools/build/modern/production.js').then(
+    (d) => ({
+      default: d.ReactQueryDevtools,
+    }),
+  ),
 );
 
-export default ExampleWithProviders;
+const queryClient = new QueryClient();
+
+export default function App() {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <Example />
+      <Suspense fallback={null}>
+        <ReactQueryDevtoolsProduction />
+      </Suspense>
+    </QueryClientProvider>
+  );
+}
 
 const validateRequired = (value: string) => !!value.length;
 const validateEmail = (email: string) =>

apps/material-react-table-docs/examples/editing-crud-cell/sandbox/package.json

@@ -16,6 +16,7 @@
     "@mui/material": "^6.2.1",
     "@mui/x-date-pickers": "^7.23.3",
     "@tanstack/react-query": "^5.62.8",
+    "@tanstack/react-query-devtools": "^5.62.8",
     "dayjs": "^1.11.13",
     "material-react-table": "^3.1.0",
     "react": "^19.0.0",

apps/material-react-table-docs/examples/editing-crud-cell/sandbox/src/TS.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useState } from 'react';
+import { lazy, Suspense, useMemo, useState } from 'react';
 import {
   MRT_EditActionButtons,
   MaterialReactTable,
@@ -328,16 +328,27 @@ function useDeleteUser() {
   });
 }
 
-const queryClient = new QueryClient();
-
-const ExampleWithProviders = () => (
-  //Put this with your other react-query providers near root of your app
-  <QueryClientProvider client={queryClient}>
-    <Example />
-  </QueryClientProvider>
+//react query setup in App.tsx
+const ReactQueryDevtoolsProduction = lazy(() =>
+  import('@tanstack/react-query-devtools/build/modern/production.js').then(
+    (d) => ({
+      default: d.ReactQueryDevtools,
+    }),
+  ),
 );
 
-export default ExampleWithProviders;
+const queryClient = new QueryClient();
+
+export default function App() {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <Example />
+      <Suspense fallback={null}>
+        <ReactQueryDevtoolsProduction />
+      </Suspense>
+    </QueryClientProvider>
+  );
+}
 
 const validateRequired = (value: string) => !!value.length;
 const validateEmail = (email: string) =>