refactor(rect-query): prefer client-only import over 'use client' (#5626)

* refactor(rect-query): prefer client-only import over 'use client'

for things that cannot work on the server, like the QueryClientProvider or the hooks; this will give better error message when attempted to be used in a server component

* chore: update rollup-plugin-preserve-directives to 0.2.0

Author: TkDodo

package.json

@@ -93,7 +93,7 @@
     "react-dom-17": "npm:react-dom@^17.0.2",
     "rimraf": "^3.0.2",
     "rollup": "^2.70.2",
-    "rollup-plugin-preserve-directives": "0.1.0",
+    "rollup-plugin-preserve-directives": "0.2.0",
     "rollup-plugin-size": "^0.2.2",
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-visualizer": "^5.6.0",

packages/react-query-persist-client/package.json

@@ -45,7 +45,8 @@
     "@tanstack/react-query": "workspace:*"
   },
   "dependencies": {
-    "@tanstack/query-persist-client-core": "workspace:*"
+    "@tanstack/query-persist-client-core": "workspace:*",
+    "client-only": "0.0.1"
   },
   "peerDependencies": {
     "@tanstack/react-query": "workspace:*"

packages/react-query-persist-client/src/PersistQueryClientProvider.tsx

@@ -1,4 +1,4 @@
-'use client'
+import 'client-only'
 import * as React from 'react'
 
 import type { PersistQueryClientOptions } from '@tanstack/query-persist-client-core'

packages/react-query/package.json

@@ -55,6 +55,7 @@
   },
   "dependencies": {
     "@tanstack/query-core": "workspace:*",
+    "client-only": "0.0.1",
     "use-sync-external-store": "^1.2.0"
   },
   "peerDependencies": {

packages/react-query/src/QueryClientProvider.tsx

@@ -1,4 +1,4 @@
-'use client'
+import 'client-only'
 import * as React from 'react'
 
 import type { QueryClient } from '@tanstack/query-core'

packages/react-query/src/useBaseQuery.ts

@@ -1,4 +1,4 @@
-'use client'
+import 'client-only'
 import * as React from 'react'
 import { useSyncExternalStore } from './useSyncExternalStore'
 

packages/react-query/src/useInfiniteQuery.ts

@@ -1,4 +1,4 @@
-'use client'
+import 'client-only'
 import type {
   QueryObserver,
   QueryFunction,

packages/react-query/src/useIsFetching.ts

@@ -1,4 +1,4 @@
-'use client'
+import 'client-only'
 import * as React from 'react'
 import type { QueryKey, QueryFilters } from '@tanstack/query-core'
 import { notifyManager, parseFilterArgs } from '@tanstack/query-core'

packages/react-query/src/useIsMutating.ts

@@ -1,4 +1,4 @@
-'use client'
+import 'client-only'
 import * as React from 'react'
 import { useSyncExternalStore } from './useSyncExternalStore'
 

packages/react-query/src/useMutation.ts

@@ -1,4 +1,4 @@
-'use client'
+import 'client-only'
 import * as React from 'react'
 import { useSyncExternalStore } from './useSyncExternalStore'