Merge branch 'main' into feat/FET-1611-track-users-through-dns-import…

…ing-flow

package.json

@@ -65,6 +65,7 @@
     "@tanstack/query-persist-client-core": "5.22.2",
     "@tanstack/query-sync-storage-persister": "5.22.2",
     "@tanstack/react-query": "5.22.2",
+    "@tanstack/react-query-devtools": "^5.59.0",
     "@tanstack/react-query-persist-client": "5.22.2",
     "@wagmi/core": "2.13.3",
     "@walletconnect/ethereum-provider": "^2.11.1",

src/utils/query/providers.tsx

@@ -1,3 +1,4 @@
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
 import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client'
 import type { ReactNode } from 'react'
 import { WagmiProvider } from 'wagmi'
@@ -18,6 +19,7 @@ export function QueryProviders({ children }: Props) {
         persistOptions={createPersistConfig({ queryClient })}
       >
         {children}
+        <ReactQueryDevtools initialIsOpen={false} buttonPosition="bottom-left" />
       </PersistQueryClientProvider>
     </WagmiProvider>
   )

src/utils/query/reactQuery.test.tsx

@@ -0,0 +1,143 @@
+import { render, waitFor } from '@app/test-utils'
+
+import { QueryClientProvider } from '@tanstack/react-query'
+import { useQuery } from './useQuery'
+import { PropsWithChildren, ReactNode } from 'react'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { WagmiProvider } from 'wagmi'
+
+import { queryClient } from './reactQuery'
+import { wagmiConfig } from './wagmi'
+
+const mockFetchData = vi.fn().mockResolvedValue('Test data')
+
+const TestComponentWrapper = ({ children }: { children: ReactNode }) => {
+  return (
+    <WagmiProvider config={wagmiConfig}>
+      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+    </WagmiProvider>
+  )
+}
+
+const TestComponentWithHook = ({ children, ...props }: PropsWithChildren<{}>) => {
+  const { data, isFetching, isLoading } = useQuery({
+    queryKey: ['test-hook'],
+    queryFn: mockFetchData,
+    enabled: true,
+  })
+
+  return (
+    <div {...props}>
+      {isLoading ? (
+        <span>Loading...</span>
+      ) : (
+        <span>
+          Data: {data}
+          {children}
+        </span>
+      )}
+    </div>
+  )
+}
+
+describe('reactQuery', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    queryClient.clear()
+  })
+
+  afterEach(() => {
+    queryClient.clear()
+  })
+
+  it('should create a query client with default options', () => {
+    expect(queryClient.getDefaultOptions()).toEqual({
+      queries: {
+        refetchOnMount: true,
+        staleTime: 0,
+        gcTime: 1_000 * 60 * 60 * 24,
+        queryKeyHashFn: expect.any(Function),
+      },
+    })
+  })
+
+  it('should not refetch query on rerender', async () => {
+    const { getByTestId, rerender } = render(
+      <TestComponentWrapper>
+        <TestComponentWithHook data-testid="test"/>
+      </TestComponentWrapper>,
+    )
+
+    await waitFor(() => {
+      expect(mockFetchData).toHaveBeenCalledTimes(1)
+      expect(getByTestId('test')).toHaveTextContent('Test data')
+    })
+
+    rerender(
+      <TestComponentWrapper>
+        <TestComponentWithHook data-testid="test"/>
+      </TestComponentWrapper>,
+    )
+
+    await waitFor(() => {
+      expect(getByTestId('test')).toHaveTextContent('Test data')
+      expect(mockFetchData).toHaveBeenCalledTimes(1)
+    })
+  })
+
+  it('should refetch query on mount', async () => {
+    const { getByTestId, unmount } = render(
+      <TestComponentWrapper>
+        <TestComponentWithHook data-testid="test"/>
+      </TestComponentWrapper>,
+    )
+
+    await waitFor(() => {
+      expect(mockFetchData).toHaveBeenCalledTimes(1)
+      expect(getByTestId('test')).toHaveTextContent('Test data')
+    })
+
+    unmount()
+    const { getByTestId: getByTestId2 } = render(
+      <TestComponentWrapper>
+        <TestComponentWithHook data-testid="test"/>
+      </TestComponentWrapper>,
+    )
+
+    await waitFor(() => {
+      expect(getByTestId2('test')).toHaveTextContent('Test data')
+      expect(mockFetchData).toHaveBeenCalledTimes(2)
+    })
+  })
+
+  it('should fetch twice on nested query with no cache and once with cache', async () => {
+    const { getByTestId, unmount } = render(
+      <TestComponentWrapper>
+        <TestComponentWithHook data-testid="test">
+          <TestComponentWithHook data-testid="nested"/>
+        </TestComponentWithHook>
+      </TestComponentWrapper>,
+    )
+
+    await waitFor(() => {
+      expect(getByTestId('test')).toHaveTextContent('Test data')
+      expect(getByTestId('nested')).toHaveTextContent('Test data')
+      expect(mockFetchData).toHaveBeenCalledTimes(2)
+    })
+
+    unmount()
+    const { getByTestId: getByTestId2 } = render(
+      <TestComponentWrapper>
+        <TestComponentWithHook data-testid="test">
+          <TestComponentWithHook data-testid="nested"/>
+        </TestComponentWithHook>
+      </TestComponentWrapper>,
+    )
+
+    await waitFor(() => {
+      expect(getByTestId2('test')).toHaveTextContent('Test data')
+      expect(getByTestId2('nested')).toHaveTextContent('Test data')
+      expect(mockFetchData).toHaveBeenCalledTimes(3)
+    })
+  })
+})

src/utils/query/reactQuery.ts

@@ -4,9 +4,8 @@ import { hashFn } from 'wagmi/query'
 export const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
-      refetchOnWindowFocus: false,
       refetchOnMount: true,
-      staleTime: 1_000 * 12,
+      staleTime: 0,
       gcTime: 1_000 * 60 * 60 * 24,
       queryKeyHashFn: hashFn,
     },