From 56fb817b61474989f433590932eacdfefc4a3835 Mon Sep 17 00:00:00 2001 From: Nho Huynh Date: Fri, 13 Sep 2024 19:26:36 +0700 Subject: [PATCH 01/14] Update react-query refetchOnMount option to always --- .../profile/[name]/registration/useMoonpayRegistration.ts | 2 +- src/hooks/chain/useBlockTimestamp.ts | 2 +- src/utils/query/reactQuery.ts | 6 +++--- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/pages/profile/[name]/registration/useMoonpayRegistration.ts b/src/components/pages/profile/[name]/registration/useMoonpayRegistration.ts index 769876eae..0329264ad 100644 --- a/src/components/pages/profile/[name]/registration/useMoonpayRegistration.ts +++ b/src/components/pages/profile/[name]/registration/useMoonpayRegistration.ts @@ -81,7 +81,7 @@ export const useMoonpayRegistration = ( return result || {} }, refetchOnWindowFocus: true, - refetchOnMount: true, + refetchOnMount: 'always', refetchInterval: 1000, refetchIntervalInBackground: true, enabled: !!currentExternalTransactionId && !isCompleted, diff --git a/src/hooks/chain/useBlockTimestamp.ts b/src/hooks/chain/useBlockTimestamp.ts index db8bd192e..865dde78d 100644 --- a/src/hooks/chain/useBlockTimestamp.ts +++ b/src/hooks/chain/useBlockTimestamp.ts @@ -12,7 +12,7 @@ export const useBlockTimestamp = ({ enabled = true }: UseBlockTimestampParameter blockTag: 'latest', query: { enabled, - refetchOnMount: true, + refetchOnMount: 'always', refetchInterval: 1000 * 60 * 5 /* 5 minutes */, staleTime: 1000 * 60 /* 1 minute */, select: (b) => b.timestamp * 1000n, diff --git a/src/utils/query/reactQuery.ts b/src/utils/query/reactQuery.ts index d297288c2..7dd6fef80 100644 --- a/src/utils/query/reactQuery.ts +++ b/src/utils/query/reactQuery.ts @@ -4,8 +4,8 @@ import { hashFn } from 'wagmi/query' export const queryClient = new QueryClient({ defaultOptions: { queries: { - refetchOnWindowFocus: false, - refetchOnMount: true, + refetchOnWindowFocus: true, + refetchOnMount: 'always', staleTime: 1_000 * 12, gcTime: 1_000 * 60 * 60 * 24, queryKeyHashFn: hashFn, @@ -21,7 +21,7 @@ export const refetchOptions: DefaultOptions = { meta: { isRefetchQuery: true, }, - refetchOnMount: true, + refetchOnMount: 'always', queryKeyHashFn: hashFn, }, } From 2091dbeedb42495bd83bb2b83be9ec2c1da8f7f4 Mon Sep 17 00:00:00 2001 From: Nho Huynh Date: Mon, 16 Sep 2024 19:06:29 +0700 Subject: [PATCH 02/14] Apply unit test for reactQuery client configuration --- src/utils/query/reactQuery.test.tsx | 83 +++++++++++++++++++++++++++++ 1 file changed, 83 insertions(+) create mode 100644 src/utils/query/reactQuery.test.tsx diff --git a/src/utils/query/reactQuery.test.tsx b/src/utils/query/reactQuery.test.tsx new file mode 100644 index 000000000..30985f70c --- /dev/null +++ b/src/utils/query/reactQuery.test.tsx @@ -0,0 +1,83 @@ +import { render, waitFor } from '@app/test-utils' + +import { QueryClientProvider, useQuery } from '@tanstack/react-query' +import { 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 }) => { + console.log('queryClient', queryClient.getDefaultOptions()) + return ( + + {children} + + ) +} + +const TestComponentWithHook = () => { + const { data, isFetching } = useQuery({ + queryKey: ['test-hook'], + queryFn: mockFetchData, + enabled: true, + }) + + return ( +
{isFetching ? Loading... : Data: {data}}
+ ) +} + +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: 'always', + staleTime: 1_000 * 12, + gcTime: 1_000 * 60 * 60 * 24, + queryKeyHashFn: expect.any(Function), + }, + }) + }) + + it('should refetch queries on mount', async () => { + const { getByTestId, unmount } = render( + + + , + ) + + await waitFor(() => { + expect(mockFetchData).toHaveBeenCalledTimes(1) + expect(getByTestId('test')).toHaveTextContent('Test data') + }) + + unmount() + const { getByTestId: getByTestId2 } = render( + + + , + ) + + await waitFor( + () => { + expect(mockFetchData).toHaveBeenCalledTimes(2) + expect(getByTestId2('test')).toHaveTextContent('Test data') + }, + { timeout: 2000 }, + ) + }) +}) From f2f1beecb9ca4b926a05399d3f7743594aaf349c Mon Sep 17 00:00:00 2001 From: Nho Huynh Date: Mon, 16 Sep 2024 19:12:31 +0700 Subject: [PATCH 03/14] Remove debug log --- src/utils/query/reactQuery.test.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/utils/query/reactQuery.test.tsx b/src/utils/query/reactQuery.test.tsx index 30985f70c..4ab83d9f3 100644 --- a/src/utils/query/reactQuery.test.tsx +++ b/src/utils/query/reactQuery.test.tsx @@ -11,7 +11,6 @@ import { wagmiConfig } from './wagmi' const mockFetchData = vi.fn().mockResolvedValue('Test data') const TestComponentWrapper = ({ children }: { children: ReactNode }) => { - console.log('queryClient', queryClient.getDefaultOptions()) return ( {children} From 47363e34aafffb5cc53db9388f092df356332cc6 Mon Sep 17 00:00:00 2001 From: Nho Huynh Date: Tue, 17 Sep 2024 19:46:25 +0700 Subject: [PATCH 04/14] Revert refetchOnMount to true for refetchOptions and useMoonpayRegistration --- .../pages/profile/[name]/registration/useMoonpayRegistration.ts | 2 +- src/utils/query/reactQuery.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/pages/profile/[name]/registration/useMoonpayRegistration.ts b/src/components/pages/profile/[name]/registration/useMoonpayRegistration.ts index 0329264ad..769876eae 100644 --- a/src/components/pages/profile/[name]/registration/useMoonpayRegistration.ts +++ b/src/components/pages/profile/[name]/registration/useMoonpayRegistration.ts @@ -81,7 +81,7 @@ export const useMoonpayRegistration = ( return result || {} }, refetchOnWindowFocus: true, - refetchOnMount: 'always', + refetchOnMount: true, refetchInterval: 1000, refetchIntervalInBackground: true, enabled: !!currentExternalTransactionId && !isCompleted, diff --git a/src/utils/query/reactQuery.ts b/src/utils/query/reactQuery.ts index 7dd6fef80..c93241bb2 100644 --- a/src/utils/query/reactQuery.ts +++ b/src/utils/query/reactQuery.ts @@ -21,7 +21,7 @@ export const refetchOptions: DefaultOptions = { meta: { isRefetchQuery: true, }, - refetchOnMount: 'always', + refetchOnMount: true, queryKeyHashFn: hashFn, }, } From 2efca82fa2d2d6df9cc7ead278640947f60a8b47 Mon Sep 17 00:00:00 2001 From: Nho Huynh Date: Wed, 18 Sep 2024 11:21:12 +0700 Subject: [PATCH 05/14] Apply queryClient.invalidateQueries on PersistQueryClientProvider. Revert refetchOnMount=true for useBlockTimestamp and reactQuery --- src/hooks/chain/useBlockTimestamp.ts | 2 +- src/utils/query/providers.tsx | 6 ++++++ src/utils/query/reactQuery.ts | 2 +- 3 files changed, 8 insertions(+), 2 deletions(-) diff --git a/src/hooks/chain/useBlockTimestamp.ts b/src/hooks/chain/useBlockTimestamp.ts index 865dde78d..db8bd192e 100644 --- a/src/hooks/chain/useBlockTimestamp.ts +++ b/src/hooks/chain/useBlockTimestamp.ts @@ -12,7 +12,7 @@ export const useBlockTimestamp = ({ enabled = true }: UseBlockTimestampParameter blockTag: 'latest', query: { enabled, - refetchOnMount: 'always', + refetchOnMount: true, refetchInterval: 1000 * 60 * 5 /* 5 minutes */, staleTime: 1000 * 60 /* 1 minute */, select: (b) => b.timestamp * 1000n, diff --git a/src/utils/query/providers.tsx b/src/utils/query/providers.tsx index 9227d1217..0eca8ebf2 100644 --- a/src/utils/query/providers.tsx +++ b/src/utils/query/providers.tsx @@ -1,3 +1,4 @@ +import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools' import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client' import type { ReactNode } from 'react' import { WagmiProvider } from 'wagmi' @@ -16,8 +17,13 @@ export function QueryProviders({ children }: Props) { { + return queryClient.invalidateQueries() + }} > {children} + + ) diff --git a/src/utils/query/reactQuery.ts b/src/utils/query/reactQuery.ts index c93241bb2..81047d639 100644 --- a/src/utils/query/reactQuery.ts +++ b/src/utils/query/reactQuery.ts @@ -5,7 +5,7 @@ export const queryClient = new QueryClient({ defaultOptions: { queries: { refetchOnWindowFocus: true, - refetchOnMount: 'always', + refetchOnMount: true, staleTime: 1_000 * 12, gcTime: 1_000 * 60 * 60 * 24, queryKeyHashFn: hashFn, From 20069e4a040687115dc7ebbf8452924e2167dcdf Mon Sep 17 00:00:00 2001 From: Nho Huynh Date: Wed, 18 Sep 2024 11:22:22 +0700 Subject: [PATCH 06/14] Remove ReactQueryDevtoolsPanel --- src/utils/query/providers.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/utils/query/providers.tsx b/src/utils/query/providers.tsx index 0eca8ebf2..1ad065a2d 100644 --- a/src/utils/query/providers.tsx +++ b/src/utils/query/providers.tsx @@ -1,4 +1,3 @@ -import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools' import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client' import type { ReactNode } from 'react' import { WagmiProvider } from 'wagmi' @@ -22,8 +21,6 @@ export function QueryProviders({ children }: Props) { }} > {children} - - ) From 61be95f0fb2b6628293c5157850882bbb8c91bf4 Mon Sep 17 00:00:00 2001 From: Nho Huynh Date: Wed, 18 Sep 2024 14:15:22 +0700 Subject: [PATCH 07/14] Update unit test for reactQuery --- src/utils/query/reactQuery.test.tsx | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/src/utils/query/reactQuery.test.tsx b/src/utils/query/reactQuery.test.tsx index 4ab83d9f3..c27fd3e71 100644 --- a/src/utils/query/reactQuery.test.tsx +++ b/src/utils/query/reactQuery.test.tsx @@ -44,7 +44,7 @@ describe('reactQuery', () => { expect(queryClient.getDefaultOptions()).toEqual({ queries: { refetchOnWindowFocus: true, - refetchOnMount: 'always', + refetchOnMount: true, staleTime: 1_000 * 12, gcTime: 1_000 * 60 * 60 * 24, queryKeyHashFn: expect.any(Function), @@ -70,13 +70,11 @@ describe('reactQuery', () => { , ) + await queryClient.invalidateQueries() - await waitFor( - () => { - expect(mockFetchData).toHaveBeenCalledTimes(2) - expect(getByTestId2('test')).toHaveTextContent('Test data') - }, - { timeout: 2000 }, - ) + await waitFor(() => { + expect(mockFetchData).toHaveBeenCalledTimes(2) + expect(getByTestId2('test')).toHaveTextContent('Test data') + }) }) }) From 8454e10bb70cbb90f1c0a4be04cae86ad56c12eb Mon Sep 17 00:00:00 2001 From: Nho Huynh Date: Tue, 24 Sep 2024 17:16:21 +0700 Subject: [PATCH 08/14] Update refetchOnMount to always for defaultOptions, update unit test for reactQuery --- src/utils/query/providers.tsx | 3 --- src/utils/query/reactQuery.test.tsx | 28 +++++++++++++++++++++++++--- src/utils/query/reactQuery.ts | 2 +- 3 files changed, 26 insertions(+), 7 deletions(-) diff --git a/src/utils/query/providers.tsx b/src/utils/query/providers.tsx index 1ad065a2d..9227d1217 100644 --- a/src/utils/query/providers.tsx +++ b/src/utils/query/providers.tsx @@ -16,9 +16,6 @@ export function QueryProviders({ children }: Props) { { - return queryClient.invalidateQueries() - }} > {children} diff --git a/src/utils/query/reactQuery.test.tsx b/src/utils/query/reactQuery.test.tsx index c27fd3e71..f97c9f337 100644 --- a/src/utils/query/reactQuery.test.tsx +++ b/src/utils/query/reactQuery.test.tsx @@ -44,7 +44,7 @@ describe('reactQuery', () => { expect(queryClient.getDefaultOptions()).toEqual({ queries: { refetchOnWindowFocus: true, - refetchOnMount: true, + refetchOnMount: 'always', staleTime: 1_000 * 12, gcTime: 1_000 * 60 * 60 * 24, queryKeyHashFn: expect.any(Function), @@ -52,7 +52,30 @@ describe('reactQuery', () => { }) }) - it('should refetch queries on mount', async () => { + it('should not refetch query on rerender', async () => { + const { getByTestId, rerender } = render( + + + , + ) + + await waitFor(() => { + expect(mockFetchData).toHaveBeenCalledTimes(1) + expect(getByTestId('test')).toHaveTextContent('Test data') + }) + + rerender( + + + , + ) + + await waitFor(() => { + expect(mockFetchData).toHaveBeenCalledTimes(1) + }) + }) + + it('should refetch query on mount', async () => { const { getByTestId, unmount } = render( @@ -70,7 +93,6 @@ describe('reactQuery', () => { , ) - await queryClient.invalidateQueries() await waitFor(() => { expect(mockFetchData).toHaveBeenCalledTimes(2) diff --git a/src/utils/query/reactQuery.ts b/src/utils/query/reactQuery.ts index 81047d639..c93241bb2 100644 --- a/src/utils/query/reactQuery.ts +++ b/src/utils/query/reactQuery.ts @@ -5,7 +5,7 @@ export const queryClient = new QueryClient({ defaultOptions: { queries: { refetchOnWindowFocus: true, - refetchOnMount: true, + refetchOnMount: 'always', staleTime: 1_000 * 12, gcTime: 1_000 * 60 * 60 * 24, queryKeyHashFn: hashFn, From b965851bf8b735de0062ec79c3fc03af4a7a85aa Mon Sep 17 00:00:00 2001 From: storywithoutend Date: Wed, 9 Oct 2024 13:22:42 +0800 Subject: [PATCH 09/14] add react-query-dev-tools --- package.json | 1 + pnpm-lock.yaml | 20 +++++++++ src/hooks/ensjs/public/useRecords.ts | 1 + src/utils/query/providers.tsx | 2 + src/utils/query/reactQuery.test.tsx | 64 +++++++++++++++++++++++----- 5 files changed, 77 insertions(+), 11 deletions(-) diff --git a/package.json b/package.json index 17cb30b03..ec3f01af5 100644 --- a/package.json +++ b/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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 96fc7eb4e..a7e2a8274 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -68,6 +68,9 @@ importers: '@tanstack/react-query': specifier: 5.22.2 version: 5.22.2(react@18.3.1) + '@tanstack/react-query-devtools': + specifier: ^5.59.0 + version: 5.59.0(@tanstack/react-query@5.22.2(react@18.3.1))(react@18.3.1) '@tanstack/react-query-persist-client': specifier: 5.22.2 version: 5.22.2(@tanstack/react-query@5.22.2(react@18.3.1))(react@18.3.1) @@ -3093,12 +3096,21 @@ packages: '@tanstack/query-core@5.22.2': resolution: {integrity: sha512-z3PwKFUFACMUqe1eyesCIKg3Jv1mysSrYfrEW5ww5DCDUD4zlpTKBvUDaEjsfZzL3ULrFLDM9yVUxI/fega1Qg==} + '@tanstack/query-devtools@5.58.0': + resolution: {integrity: sha512-iFdQEFXaYYxqgrv63ots+65FGI+tNp5ZS5PdMU1DWisxk3fez5HG3FyVlbUva+RdYS5hSLbxZ9aw3yEs97GNTw==} + '@tanstack/query-persist-client-core@5.22.2': resolution: {integrity: sha512-sFDgWoN54uclIDIoImPmDzxTq8HhZEt9pO0JbVHjI6LPZqunMMF9yAq9zFKrpH//jD5f+rBCQsdGyhdpUo9e8Q==} '@tanstack/query-sync-storage-persister@5.22.2': resolution: {integrity: sha512-mDxXURiMPzWXVc+FwDu94VfIt/uHk5+9EgcxJRYtj8Vsx18T0DiiKk1VgVOBLd97C+Sa7z7ujP2D6Y5lphW+hQ==} + '@tanstack/react-query-devtools@5.59.0': + resolution: {integrity: sha512-Kz7577FQGU8qmJxROIT/aOwmkTcxfBqgTP6r1AIvuJxVMVHPkp8eQxWQ7BnfBsy/KTJHiV9vMtRVo1+R1tB3vg==} + peerDependencies: + '@tanstack/react-query': ^5.59.0 + react: ^18.2.0 + '@tanstack/react-query-persist-client@5.22.2': resolution: {integrity: sha512-osAaQn2PDTaa2ApTLOAus7g8Y96LHfS2+Pgu/RoDlEJUEkX7xdEn0YuurxbnJaDJDESMfr+CH/eAX2y+lx02Fg==} peerDependencies: @@ -13816,6 +13828,8 @@ snapshots: '@tanstack/query-core@5.22.2': {} + '@tanstack/query-devtools@5.58.0': {} + '@tanstack/query-persist-client-core@5.22.2': dependencies: '@tanstack/query-core': 5.22.2 @@ -13825,6 +13839,12 @@ snapshots: '@tanstack/query-core': 5.22.2 '@tanstack/query-persist-client-core': 5.22.2 + '@tanstack/react-query-devtools@5.59.0(@tanstack/react-query@5.22.2(react@18.3.1))(react@18.3.1)': + dependencies: + '@tanstack/query-devtools': 5.58.0 + '@tanstack/react-query': 5.22.2(react@18.3.1) + react: 18.3.1 + '@tanstack/react-query-persist-client@5.22.2(@tanstack/react-query@5.22.2(react@18.3.1))(react@18.3.1)': dependencies: '@tanstack/query-persist-client-core': 5.22.2 diff --git a/src/hooks/ensjs/public/useRecords.ts b/src/hooks/ensjs/public/useRecords.ts index 6e95d1e10..dafbf538b 100644 --- a/src/hooks/ensjs/public/useRecords.ts +++ b/src/hooks/ensjs/public/useRecords.ts @@ -86,6 +86,7 @@ export const getRecordsQueryFn = > => { if (!name) throw new Error('name is required') + console.log('getRecordsQueryFn', name) const client = config.getClient({ chainId }) const res = await getRecords(client, { name, diff --git a/src/utils/query/providers.tsx b/src/utils/query/providers.tsx index 9227d1217..8224a50d0 100644 --- a/src/utils/query/providers.tsx +++ b/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} + ) diff --git a/src/utils/query/reactQuery.test.tsx b/src/utils/query/reactQuery.test.tsx index f97c9f337..aac560125 100644 --- a/src/utils/query/reactQuery.test.tsx +++ b/src/utils/query/reactQuery.test.tsx @@ -1,7 +1,8 @@ import { render, waitFor } from '@app/test-utils' -import { QueryClientProvider, useQuery } from '@tanstack/react-query' -import { ReactNode } from 'react' +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' @@ -18,15 +19,24 @@ const TestComponentWrapper = ({ children }: { children: ReactNode }) => { ) } -const TestComponentWithHook = () => { - const { data, isFetching } = useQuery({ +const TestComponentWithHook = ({ children, ...props }: PropsWithChildren<{}>) => { + const { data, isFetching, isLoading } = useQuery({ queryKey: ['test-hook'], queryFn: mockFetchData, enabled: true, }) return ( -
{isFetching ? Loading... : Data: {data}}
+
+ {isLoading ? ( + Loading... + ) : ( + + Data: {data} + {children} + + )} +
) } @@ -44,8 +54,8 @@ describe('reactQuery', () => { expect(queryClient.getDefaultOptions()).toEqual({ queries: { refetchOnWindowFocus: true, - refetchOnMount: 'always', - staleTime: 1_000 * 12, + refetchOnMount: true, + staleTime: 0, gcTime: 1_000 * 60 * 60 * 24, queryKeyHashFn: expect.any(Function), }, @@ -55,7 +65,7 @@ describe('reactQuery', () => { it('should not refetch query on rerender', async () => { const { getByTestId, rerender } = render( - + , ) @@ -66,11 +76,12 @@ describe('reactQuery', () => { rerender( - + , ) await waitFor(() => { + expect(getByTestId('test')).toHaveTextContent('Test data') expect(mockFetchData).toHaveBeenCalledTimes(1) }) }) @@ -78,7 +89,7 @@ describe('reactQuery', () => { it('should refetch query on mount', async () => { const { getByTestId, unmount } = render( - + , ) @@ -90,13 +101,44 @@ describe('reactQuery', () => { unmount() const { getByTestId: getByTestId2 } = render( - + , ) await waitFor(() => { + expect(getByTestId2('test')).toHaveTextContent('Test data') expect(mockFetchData).toHaveBeenCalledTimes(2) + }) + }) + + it('should not fetch twice on nested query', async () => { + const { getByTestId, unmount } = render( + + + + + , + ) + + await waitFor(() => { + expect(getByTestId('test')).toHaveTextContent('Test data') + expect(getByTestId('nested')).toHaveTextContent('Test data') + expect(mockFetchData).toHaveBeenCalledTimes(1) + }) + + unmount() + const { getByTestId: getByTestId2 } = render( + + + + + , + ) + + await waitFor(() => { expect(getByTestId2('test')).toHaveTextContent('Test data') + expect(getByTestId2('nested')).toHaveTextContent('Test data') + expect(mockFetchData).toHaveBeenCalledTimes(2) }) }) }) From 3c19154b34a5e2ed13198799f71704c402745b1e Mon Sep 17 00:00:00 2001 From: storywithoutend Date: Wed, 9 Oct 2024 15:36:54 +0800 Subject: [PATCH 10/14] update react query defaults and react query test --- src/utils/query/providers.tsx | 2 +- src/utils/query/reactQuery.test.tsx | 6 +++--- src/utils/query/reactQuery.ts | 4 ++-- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/utils/query/providers.tsx b/src/utils/query/providers.tsx index 8224a50d0..387a4e1ce 100644 --- a/src/utils/query/providers.tsx +++ b/src/utils/query/providers.tsx @@ -19,7 +19,7 @@ export function QueryProviders({ children }: Props) { persistOptions={createPersistConfig({ queryClient })} > {children} - + ) diff --git a/src/utils/query/reactQuery.test.tsx b/src/utils/query/reactQuery.test.tsx index aac560125..f89d42bc1 100644 --- a/src/utils/query/reactQuery.test.tsx +++ b/src/utils/query/reactQuery.test.tsx @@ -111,7 +111,7 @@ describe('reactQuery', () => { }) }) - it('should not fetch twice on nested query', async () => { + it('should fetch twice on nested query with no cache and once with cache', async () => { const { getByTestId, unmount } = render( @@ -123,7 +123,7 @@ describe('reactQuery', () => { await waitFor(() => { expect(getByTestId('test')).toHaveTextContent('Test data') expect(getByTestId('nested')).toHaveTextContent('Test data') - expect(mockFetchData).toHaveBeenCalledTimes(1) + expect(mockFetchData).toHaveBeenCalledTimes(2) }) unmount() @@ -138,7 +138,7 @@ describe('reactQuery', () => { await waitFor(() => { expect(getByTestId2('test')).toHaveTextContent('Test data') expect(getByTestId2('nested')).toHaveTextContent('Test data') - expect(mockFetchData).toHaveBeenCalledTimes(2) + expect(mockFetchData).toHaveBeenCalledTimes(3) }) }) }) diff --git a/src/utils/query/reactQuery.ts b/src/utils/query/reactQuery.ts index c93241bb2..80ba1fb8c 100644 --- a/src/utils/query/reactQuery.ts +++ b/src/utils/query/reactQuery.ts @@ -5,8 +5,8 @@ export const queryClient = new QueryClient({ defaultOptions: { queries: { refetchOnWindowFocus: true, - refetchOnMount: 'always', - staleTime: 1_000 * 12, + refetchOnMount: true, + staleTime: 0, gcTime: 1_000 * 60 * 60 * 24, queryKeyHashFn: hashFn, }, From 161447b28714b83dbf5656f4ad90efc55116c7ec Mon Sep 17 00:00:00 2001 From: storywithoutend Date: Wed, 9 Oct 2024 16:05:25 +0800 Subject: [PATCH 11/14] clean up console logs --- .../pages/profile/[name]/registration/steps/Transactions.tsx | 2 -- src/hooks/ensjs/public/useRecords.ts | 1 - 2 files changed, 3 deletions(-) diff --git a/src/components/pages/profile/[name]/registration/steps/Transactions.tsx b/src/components/pages/profile/[name]/registration/steps/Transactions.tsx index 4e245ea57..f934e8ef2 100644 --- a/src/components/pages/profile/[name]/registration/steps/Transactions.tsx +++ b/src/components/pages/profile/[name]/registration/steps/Transactions.tsx @@ -336,8 +336,6 @@ const Transactions = ({ registrationData, name, callback, onStart }: Props) => { endDate: commitTimestamp ? new Date(commitTimestamp + ONE_DAY * 1000) : undefined, }) - console.log('duration', duration, commitTimestamp) - return ( setResetOpen(false)}> diff --git a/src/hooks/ensjs/public/useRecords.ts b/src/hooks/ensjs/public/useRecords.ts index dafbf538b..6e95d1e10 100644 --- a/src/hooks/ensjs/public/useRecords.ts +++ b/src/hooks/ensjs/public/useRecords.ts @@ -86,7 +86,6 @@ export const getRecordsQueryFn = > => { if (!name) throw new Error('name is required') - console.log('getRecordsQueryFn', name) const client = config.getClient({ chainId }) const res = await getRecords(client, { name, From 3f27a767a2a137bbd7d55a22e746a65e4fad25bf Mon Sep 17 00:00:00 2001 From: storywithoutend Date: Wed, 9 Oct 2024 19:38:19 +0800 Subject: [PATCH 12/14] clean up extendNames test --- e2e/specs/stateless/extendNames.spec.ts | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/e2e/specs/stateless/extendNames.spec.ts b/e2e/specs/stateless/extendNames.spec.ts index ae14d1346..f16352fbb 100644 --- a/e2e/specs/stateless/extendNames.spec.ts +++ b/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') From 2dca3da976b50f2147dc9c069435a760e558e7fa Mon Sep 17 00:00:00 2001 From: storywithoutend Date: Tue, 22 Oct 2024 11:04:07 +0800 Subject: [PATCH 13/14] remove additional react-query option --- src/utils/query/reactQuery.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/utils/query/reactQuery.ts b/src/utils/query/reactQuery.ts index 80ba1fb8c..37fd0b132 100644 --- a/src/utils/query/reactQuery.ts +++ b/src/utils/query/reactQuery.ts @@ -4,7 +4,6 @@ import { hashFn } from 'wagmi/query' export const queryClient = new QueryClient({ defaultOptions: { queries: { - refetchOnWindowFocus: true, refetchOnMount: true, staleTime: 0, gcTime: 1_000 * 60 * 60 * 24, From d480cd12f02738f86959a5e6e48776945cfc79d0 Mon Sep 17 00:00:00 2001 From: storywithoutend Date: Wed, 23 Oct 2024 11:29:30 +0800 Subject: [PATCH 14/14] fix unit test --- src/utils/query/reactQuery.test.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/utils/query/reactQuery.test.tsx b/src/utils/query/reactQuery.test.tsx index f89d42bc1..5ac7c41da 100644 --- a/src/utils/query/reactQuery.test.tsx +++ b/src/utils/query/reactQuery.test.tsx @@ -53,7 +53,6 @@ describe('reactQuery', () => { 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,