React Data Sync Client: Add ReactQuery dev tools (#41357)

Automattic · Jan 30, 2025 · b614623 · b614623
1 parent a2a02b1
commit b614623
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 6 deletions.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/...packages/react-data-sync-client/changelog/add-react-data-sync-client-react-query-devtools b/...packages/react-data-sync-client/changelog/add-react-data-sync-client-react-query-devtools
@@ -0,0 +1,4 @@
+Significance: patch
+Type: added
+
+Add React Query Devtools
diff --git a/projects/js-packages/react-data-sync-client/package.json b/projects/js-packages/react-data-sync-client/package.json
@@ -24,6 +24,8 @@
 	"devDependencies": {
 		"@automattic/jetpack-webpack-config": "workspace:*",
 		"@tanstack/react-query": "5.0.5",
+		"@tanstack/react-query-devtools": "5.0.5",
+		"react-dom": "^18.0.0",
 		"jest": "*",
 		"react": "18.3.1",
 		"tslib": "2.5.0",

diff --git a/projects/js-packages/react-data-sync-client/src/DataSyncHooks.ts b/projects/js-packages/react-data-sync-client/src/DataSyncHooks.ts
@@ -8,6 +8,7 @@ import {
 	useMutation,
 	QueryClientProvider,
 } from '@tanstack/react-query';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import React, { useRef, useEffect } from 'react';
 import { z } from 'zod';
 import { DataSync } from './DataSync';
@@ -29,10 +30,12 @@ export function invalidateQuery( key: string ) {
  * @see https://tanstack.com/query/v5/docs/react/reference/QueryClientProvider
  */
 export function DataSyncProvider( props: { children: React.ReactNode } ) {
-	return QueryClientProvider( {
-		client: queryClient,
-		...props,
-	} );
+	return React.createElement(
+		QueryClientProvider,
+		{ client: queryClient },
+		props.children,
+		React.createElement( ReactQueryDevtools )
+	);
 }
 
 /**