FIX: useConnectorClient to be enabled only when connected or reconnecting (#4124)

* update enabled param for useConnectorClient and add a test

* bring updated hook

* change set

* apply review

Author: t0rbik

.changeset/silent-countries-study.md

@@ -0,0 +1,6 @@
+---
+"wagmi": patch
+"@wagmi/vue": patch
+---
+
+Updated `useConnectorClient` to be enabled when status is `'reconnecting'` or `'connected'` (previously was also enabled when status was `'connecting'`).

packages/react/src/hooks/useConnectorClient.test.tsx

@@ -160,6 +160,15 @@ test('behavior: disabled when properties missing', async () => {
   await waitFor(() => expect(result.current.isPending).toBeTruthy())
 })
 
+test('behavior: disabled when connecting', async () => {
+  const { result } = renderHook(() => useConnectorClient())
+
+  config.setState((x) => ({ ...x, status: 'connecting' }))
+
+  await wait(100)
+  expect(result.current.isLoading).not.toBeTruthy()
+})
+
 test('behavior: re-render does not invalidate query', async () => {
   const { getByTestId } = render(<Parent />)
 

packages/react/src/hooks/useConnectorClient.ts

@@ -81,7 +81,10 @@ export function useConnectorClient<
     chainId: parameters.chainId ?? chainId,
     connector: parameters.connector ?? connector,
   })
-  const enabled = Boolean(status !== 'disconnected' && (query.enabled ?? true))
+  const enabled = Boolean(
+    (status === 'connected' || status === 'reconnecting') &&
+      (query.enabled ?? true),
+  )
 
   const addressRef = useRef(address)
   // biome-ignore lint/correctness/useExhaustiveDependencies: `queryKey` not required

packages/vue/src/composables/useConnectorClient.test.ts

@@ -145,3 +145,12 @@ test('behavior: disabled when properties missing', async () => {
   await wait(100)
   expect(connectorClient.isPending.value).toBe(true)
 })
+
+test('behavior: disabled when connecting', async () => {
+  const [connectorClient] = renderComposable(() => useConnectorClient())
+
+  config.setState((x) => ({ ...x, status: 'connecting' }))
+
+  await wait(100)
+  expect(connectorClient.isLoading.value).not.toBeTruthy()
+})

packages/vue/src/composables/useConnectorClient.ts

@@ -97,7 +97,8 @@ export function useConnectorClient<
       connector: connector as Connector,
     })
     const enabled = Boolean(
-      status.value !== 'disconnected' && (query.enabled ?? true),
+      (status.value === 'connected' || status.value === 'reconnecting') &&
+        (query.enabled ?? true),
     )
     return {
       ...query,