Feat/fet 1625 all data should refetched on refresh

e2e/specs/stateless/extendNames.spec.ts

@@ -77,6 +77,7 @@ test('should be able to register multiple names on the address page', async ({
   // increment and save
   await page.getByTestId('plus-minus-control-plus').click()
   await page.getByTestId('plus-minus-control-plus').click()
+  await page.waitForTimeout(500)
   await page.getByTestId('extend-names-confirm').click()
 
   await transactionModal.autoComplete()
@@ -88,13 +89,11 @@ test('should be able to register multiple names on the address page', async ({
 
   // Should be able to remove this after useQuery is fixed. Using to force a refetch.
   await time.increaseTime({ seconds: 15 })
-  await page.pause()
   await page.reload()
   for (const name of extendableNameItems) {
     const label = name.replace('.eth', '')
     await addresPage.search(label)
     await expect(addresPage.getNameRow(name)).toBeVisible({ timeout: 5000 })
-    await page.pause()
     await expect(await addresPage.getTimestamp(name)).not.toBe(timestampDict[name])
     await expect(await addresPage.getTimestamp(name)).toBe(timestampDict[name] + 31536000000 * 3)
   }
@@ -194,7 +193,6 @@ test('should be able to extend a single unwrapped name in grace period from prof
 
   const timestamp = await profilePage.getExpiryTimestamp()
 
-  await page.pause()
   await profilePage.getExtendButton.click()
 
   const extendNamesModal = makePageObject('ExtendNamesModal')
@@ -353,7 +351,6 @@ test('should be able to extend a name by a month', async ({
   await profilePage.goto(name)
   await login.connect()
 
-  await page.pause()
   const timestamp = await profilePage.getExpiryTimestamp()
   await profilePage.getExtendButton.click()
 
@@ -418,7 +415,6 @@ test('should be able to extend a name by a day', async ({
   await profilePage.goto(name)
   await login.connect()
 
-  await page.pause()
   const timestamp = await profilePage.getExpiryTimestamp()
   await profilePage.getExtendButton.click()
 
@@ -485,7 +481,6 @@ test('should be able to extend a name in grace period by a month', async ({
 
   const timestamp = await profilePage.getExpiryTimestamp()
 
-  await page.pause()
   await profilePage.getExtendButton.click()
 
   const extendNamesModal = makePageObject('ExtendNamesModal')
@@ -568,7 +563,6 @@ test('should be able to extend a name in grace period by 1 day', async ({
 
   const timestamp = await profilePage.getExpiryTimestamp()
 
-  await page.pause()
   await profilePage.getExtendButton.click()
 
   const extendNamesModal = makePageObject('ExtendNamesModal')

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/components/pages/profile/[name]/registration/steps/Transactions.tsx

@@ -339,8 +339,6 @@ const Transactions = ({ registrationData, name, callback, onStart }: Props) => {
     endDate: commitTimestamp ? new Date(commitTimestamp + ONE_DAY * 1000) : undefined,
   })
 
-  console.log('duration', duration, commitTimestamp)
-
   return (
     <StyledCard>
       <Dialog variant="blank" open={resetOpen} onDismiss={() => setResetOpen(false)}>

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,144 @@
+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: {
+        refetchOnWindowFocus: true,
+        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,9 @@ import { hashFn } from 'wagmi/query'
 export const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
-      refetchOnWindowFocus: false,
+      refetchOnWindowFocus: true,
       refetchOnMount: true,
-      staleTime: 1_000 * 12,
+      staleTime: 0,
       gcTime: 1_000 * 60 * 60 * 24,
       queryKeyHashFn: hashFn,
     },