@lifi/widget 4.3.0 → 4.4.0

package/src/hooks/useRoutes.ts

@@ -13,7 +13,11 @@ import {
   useChainTypeFromAddress,
   useEthereumContext,
 } from '@lifi/widget-provider'
-import { useQuery, useQueryClient } from '@tanstack/react-query'
+import {
+  keepPreviousData,
+  useQuery,
+  useQueryClient,
+} from '@tanstack/react-query'
 import { useCallback, useMemo } from 'react'
 import { useSDKClient } from '../providers/SDKClientProvider.js'
 import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
@@ -39,15 +43,28 @@ const refetchTime = 60_000
 
 interface RoutesProps {
   observableRoute?: Route
+  /**
+   * Address to quote from when no wallet is connected. Treated as a non-signing
+   * placeholder, so signer-dependent (relayer/permit2) quotes are skipped.
+   */
+  quoteFromAddress?: string
+  /**
+   * Keep showing the previous result while a new query (e.g. a token/amount
+   * change) is fetching, instead of clearing to a loading state.
+   */
+  keepPreviousData?: boolean
 }
 
 export const useRoutes = ({
   observableRoute,
+  quoteFromAddress,
+  keepPreviousData: keepPreviousDataEnabled,
 }: RoutesProps = {}): {
   routes: Route[] | undefined
   isLoading: boolean
   isFetching: boolean
   isFetched: boolean
+  isError: boolean
   dataUpdatedAt: number
   refetchTime: number
   refetch: () => void
@@ -136,8 +153,18 @@ export const useRoutes = ({
       ? Number(fromTokenAmount) > 0 && Number(toTokenAmount) > 0
       : Number(fromTokenAmount) > 0 || Number(toTokenAmount) > 0
 
-  const contractCallQuoteEnabled: boolean =
-    mode === 'custom' ? Boolean(contractCalls && account.address) : true
+  const customType = mode === 'custom' ? modeOptions?.custom?.type : undefined
+  const isContractCallQuote =
+    mode === 'custom' && Boolean(contractCalls?.length)
+  // A contract-call quote needs a connected wallet to resolve fromAddress.
+  // Deposit funding quotes a plain route with no contract calls and no wallet
+  // (a placeholder fromAddress arrives via quoteFromAddress); every other custom
+  // flow stays gated on a real wallet, as before.
+  const contractCallQuoteEnabled: boolean = isContractCallQuote
+    ? Boolean(account.address)
+    : mode !== 'custom' || customType === 'deposit'
+
+  const effectiveFromAddress = account.address ?? quoteFromAddress
 
   // When we bridge between ecosystems we need to be sure toAddress is set and has the same chainType as toChain
   // If toAddress is set, it must have the same chainType as toChain
@@ -178,7 +205,7 @@ export const useRoutes = ({
     () =>
       [
         getQueryKey('routes', keyPrefix),
-        account.address,
+        effectiveFromAddress,
         fromChain?.id as number,
         fromToken?.address as string,
         fromTokenAmount,
@@ -208,7 +235,7 @@ export const useRoutes = ({
       ] as const,
     [
       keyPrefix,
-      account.address,
+      effectiveFromAddress,
       fromChain?.id,
       fromToken?.address,
       fromTokenAmount,
@@ -242,355 +269,362 @@ export const useRoutes = ({
   const { getIntermediateRoutes, setIntermediateRoutes } =
     useIntermediateRoutesStore()
 
-  const { data, isLoading, isFetching, isFetched, dataUpdatedAt, refetch } =
-    useQuery({
-      queryKey,
-      queryFn: async ({
-        queryKey: [
-          _,
-          fromAddress,
-          fromChainId,
-          fromTokenAddress,
-          fromTokenAmount,
-          toAddress,
-          toChainId,
-          toTokenAddress,
-          toTokenAmount,
-          validUntilDuration,
-          partiallyFillable,
-          contractCalls,
-          slippage = defaultSlippage,
-          swapOnly,
-          disabledBridges,
-          disabledExchanges,
-          allowedBridges,
-          allowedExchanges,
-          routePriority,
-          mode,
-          allowSwitchChain,
-          enabledRefuel,
-          gasRecommendationFromAmount,
-          configuredFee,
-          disableMessageSigning,
-          isBatchingSupported,
-          isPrivate,
-          // _observableRouteId must be the last element in the query key
-          _observableRouteId,
-        ],
-        signal,
-      }) => {
-        const fromAmount = parseUnits(fromTokenAmount, fromToken!.decimals)
-        const toAmount = toTokenAmount
-          ? parseUnits(toTokenAmount, toToken!.decimals)
-          : undefined
-        const formattedSlippage = slippage
-          ? Number.parseFloat(slippage) / 100
-          : defaultSlippage
-
-        const allowBridges = swapOnly
-          ? []
-          : observableRoute
-            ? observableRoute.steps.flatMap((step) =>
-                step.includedSteps.reduce((toolKeys, includedStep) => {
-                  if (includedStep.type === 'cross') {
-                    toolKeys.push(includedStep.toolDetails.key)
-                  }
-                  return toolKeys
-                }, [] as string[])
-              )
-            : allowedBridges
-        const allowExchanges = observableRoute
+  const {
+    data,
+    isLoading,
+    isFetching,
+    isFetched,
+    isError,
+    dataUpdatedAt,
+    refetch,
+  } = useQuery({
+    queryKey,
+    queryFn: async ({
+      queryKey: [
+        _,
+        fromAddress,
+        fromChainId,
+        fromTokenAddress,
+        fromTokenAmount,
+        toAddress,
+        toChainId,
+        toTokenAddress,
+        toTokenAmount,
+        validUntilDuration,
+        partiallyFillable,
+        contractCalls,
+        slippage = defaultSlippage,
+        swapOnly,
+        disabledBridges,
+        disabledExchanges,
+        allowedBridges,
+        allowedExchanges,
+        routePriority,
+        mode,
+        allowSwitchChain,
+        enabledRefuel,
+        gasRecommendationFromAmount,
+        configuredFee,
+        disableMessageSigning,
+        isBatchingSupported,
+        isPrivate,
+        // _observableRouteId must be the last element in the query key
+        _observableRouteId,
+      ],
+      signal,
+    }) => {
+      const fromAmount = parseUnits(fromTokenAmount, fromToken!.decimals)
+      const toAmount = toTokenAmount
+        ? parseUnits(toTokenAmount, toToken!.decimals)
+        : undefined
+      const formattedSlippage = slippage
+        ? Number.parseFloat(slippage) / 100
+        : defaultSlippage
+
+      const allowBridges = swapOnly
+        ? []
+        : observableRoute
           ? observableRoute.steps.flatMap((step) =>
               step.includedSteps.reduce((toolKeys, includedStep) => {
-                if (includedStep.type === 'swap') {
+                if (includedStep.type === 'cross') {
                   toolKeys.push(includedStep.toolDetails.key)
                 }
                 return toolKeys
               }, [] as string[])
             )
-          : allowedExchanges
-
-        const calculatedFee = await feeConfig?.calculateFee?.({
-          fromChain: fromChain!,
-          toChain: toChain!,
-          fromToken: fromToken!,
-          toToken: toToken!,
-          fromAddress,
-          toAddress,
-          fromAmount,
-          toAmount,
-          slippage: formattedSlippage,
-        })
-
-        if (mode === 'custom' && contractCalls && toAmount) {
-          const contractCallQuote = await getContractCallsQuote(
-            sdkClient,
-            {
-              // Contract calls are enabled only when fromAddress is set
-              fromAddress: fromAddress as string,
-              fromChain: fromChainId,
-              fromToken: fromTokenAddress,
-              toAmount: toAmount.toString(),
-              toChain: toChainId,
-              toToken: toTokenAddress,
-              contractCalls,
-              denyBridges: disabledBridges.length ? disabledBridges : undefined,
-              denyExchanges: disabledExchanges.length
-                ? disabledExchanges
-                : undefined,
-              allowBridges,
-              allowExchanges,
-              toFallbackAddress: toAddress,
-              slippage: formattedSlippage,
-              fee: calculatedFee || configuredFee,
-            },
-            { signal }
+          : allowedBridges
+      const allowExchanges = observableRoute
+        ? observableRoute.steps.flatMap((step) =>
+            step.includedSteps.reduce((toolKeys, includedStep) => {
+              if (includedStep.type === 'swap') {
+                toolKeys.push(includedStep.toolDetails.key)
+              }
+              return toolKeys
+            }, [] as string[])
           )
+        : allowedExchanges
+
+      const calculatedFee = await feeConfig?.calculateFee?.({
+        fromChain: fromChain!,
+        toChain: toChain!,
+        fromToken: fromToken!,
+        toToken: toToken!,
+        fromAddress,
+        toAddress,
+        fromAmount,
+        toAmount,
+        slippage: formattedSlippage,
+      })
 
-          contractCallQuote.action.toToken = toToken!
-
-          const customStep =
-            mode === 'custom'
-              ? contractCallQuote.includedSteps?.find(
-                  (step) => step.type === 'custom'
-                )
-              : undefined
-
-          if (customStep && contractTool) {
-            const toolDetails = {
-              key: contractTool.name,
-              name: contractTool.name,
-              logoURI: contractTool.logoURI,
-            }
-            customStep.toolDetails = toolDetails
-            contractCallQuote.toolDetails = toolDetails
-          }
+      if (mode === 'custom' && contractCalls?.length && toAmount) {
+        const contractCallQuote = await getContractCallsQuote(
+          sdkClient,
+          {
+            // Contract calls are enabled only when fromAddress is set
+            fromAddress: fromAddress as string,
+            fromChain: fromChainId,
+            fromToken: fromTokenAddress,
+            toAmount: toAmount.toString(),
+            toChain: toChainId,
+            toToken: toTokenAddress,
+            contractCalls,
+            denyBridges: disabledBridges.length ? disabledBridges : undefined,
+            denyExchanges: disabledExchanges.length
+              ? disabledExchanges
+              : undefined,
+            allowBridges,
+            allowExchanges,
+            toFallbackAddress: toAddress,
+            slippage: formattedSlippage,
+            fee: calculatedFee || configuredFee,
+          },
+          { signal }
+        )
 
-          const route: Route = convertQuoteToRoute(contractCallQuote)
+        contractCallQuote.action.toToken = toToken!
 
-          return [route]
-        }
+        const customStep =
+          mode === 'custom'
+            ? contractCallQuote.includedSteps?.find(
+                (step) => step.type === 'custom'
+              )
+            : undefined
 
-        // Prevent sending a request for the same chain token combinations.
-        // Exception: proceed anyway if mode is custom and modeOptions custom type is deposit
-        if (
-          fromChainId === toChainId &&
-          fromTokenAddress === toTokenAddress &&
-          !(mode === 'custom' && modeOptions?.custom?.type === 'deposit')
-        ) {
-          return
+        if (customStep && contractTool) {
+          const toolDetails = {
+            key: contractTool.name,
+            name: contractTool.name,
+            logoURI: contractTool.logoURI,
+          }
+          customStep.toolDetails = toolDetails
+          contractCallQuote.toolDetails = toolDetails
         }
 
-        const isObservableRelayerRoute = observableRoute?.steps?.some(
-          (step) => !!isGaslessStep?.(step, fromChain)
-        )
-
-        const shouldUseMainRoutes =
-          !observableRoute || !isObservableRelayerRoute
-        const shouldUseRelayerQuote =
-          // Relayer quotes don't support limit-order params
-          mode !== 'limit' &&
-          fromAddress &&
-          fromChain?.chainType === ChainType.EVM &&
-          fromChain.permit2 &&
-          fromChain.permit2Proxy &&
-          fromChain.relayerSupported &&
-          fromChain.nativeToken.address !== fromTokenAddress &&
-          useRelayerRoutes &&
-          !isBatchingSupported &&
-          (!observableRoute || isObservableRelayerRoute)
-
-        const limitOrderRouteParams =
-          mode === 'limit'
-            ? {
-                toAmount: toAmount?.toString(),
-                validUntil: Math.floor(Date.now() / 1000) + validUntilDuration,
-                partiallyFillable: partiallyFillable,
-              }
-            : undefined
+        const route: Route = convertQuoteToRoute(contractCallQuote)
+
+        return [route]
+      }
+
+      // Prevent sending a request for the same chain token combinations.
+      // Exception: proceed anyway if mode is custom and modeOptions custom type is deposit
+      if (
+        fromChainId === toChainId &&
+        fromTokenAddress === toTokenAddress &&
+        !(mode === 'custom' && modeOptions?.custom?.type === 'deposit')
+      ) {
+        return
+      }
+
+      const isObservableRelayerRoute = observableRoute?.steps?.some(
+        (step) => !!isGaslessStep?.(step, fromChain)
+      )
+
+      const shouldUseMainRoutes = !observableRoute || !isObservableRelayerRoute
+      const shouldUseRelayerQuote =
+        // Relayer quotes don't support limit-order params
+        mode !== 'limit' &&
+        account.address &&
+        fromAddress &&
+        fromChain?.chainType === ChainType.EVM &&
+        fromChain.permit2 &&
+        fromChain.permit2Proxy &&
+        fromChain.relayerSupported &&
+        fromChain.nativeToken.address !== fromTokenAddress &&
+        useRelayerRoutes &&
+        !isBatchingSupported &&
+        (!observableRoute || isObservableRelayerRoute)
+
+      const limitOrderRouteParams =
+        mode === 'limit'
+          ? {
+              toAmount: toAmount?.toString(),
+              validUntil: Math.floor(Date.now() / 1000) + validUntilDuration,
+              partiallyFillable: partiallyFillable,
+            }
+          : undefined
 
-        const mainRoutesPromise = shouldUseMainRoutes
-          ? getRoutes(
-              sdkClient,
-              {
-                fromAddress,
-                fromAmount: fromAmount.toString(),
-                fromChainId,
-                fromTokenAddress,
-                toAddress,
-                toChainId,
-                toTokenAddress,
-                fromAmountForGas:
-                  enabledRefuel && gasRecommendationFromAmount
-                    ? gasRecommendationFromAmount
+      const mainRoutesPromise = shouldUseMainRoutes
+        ? getRoutes(
+            sdkClient,
+            {
+              fromAddress,
+              fromAmount: fromAmount.toString(),
+              fromChainId,
+              fromTokenAddress,
+              toAddress,
+              toChainId,
+              toTokenAddress,
+              fromAmountForGas:
+                enabledRefuel && gasRecommendationFromAmount
+                  ? gasRecommendationFromAmount
+                  : undefined,
+              ...limitOrderRouteParams,
+              options: {
+                allowSwitchChain: mode === 'refuel' ? false : allowSwitchChain,
+                bridges:
+                  allowBridges?.length || disabledBridges.length
+                    ? {
+                        allow: allowBridges,
+                        deny: disabledBridges.length
+                          ? disabledBridges
+                          : undefined,
+                      }
                     : undefined,
-                ...limitOrderRouteParams,
-                options: {
-                  allowSwitchChain:
-                    mode === 'refuel' ? false : allowSwitchChain,
-                  bridges:
-                    allowBridges?.length || disabledBridges.length
-                      ? {
-                          allow: allowBridges,
-                          deny: disabledBridges.length
-                            ? disabledBridges
-                            : undefined,
-                        }
-                      : undefined,
-                  exchanges:
-                    allowExchanges?.length || disabledExchanges.length
-                      ? {
-                          allow: allowExchanges,
-                          deny: disabledExchanges.length
-                            ? disabledExchanges
-                            : undefined,
-                        }
-                      : undefined,
-                  order: routePriority,
-                  slippage: formattedSlippage,
-                  fee: calculatedFee || configuredFee,
-                  executionType: disableMessageSigning ? 'transaction' : 'all',
-                  ...(isPrivate && { private: true }),
-                },
-              },
-              { signal }
-            )
-          : Promise.resolve(null)
-
-        const relayerQuotePromise = shouldUseRelayerQuote
-          ? getRelayerQuote(
-              sdkClient,
-              {
-                fromAddress,
-                fromAmount: fromAmount.toString(),
-                fromChain: fromChainId,
-                fromToken: fromTokenAddress,
-                toAddress,
-                toChain: toChainId,
-                toToken: toTokenAddress,
-                fromAmountForGas:
-                  enabledRefuel && gasRecommendationFromAmount
-                    ? gasRecommendationFromAmount
+                exchanges:
+                  allowExchanges?.length || disabledExchanges.length
+                    ? {
+                        allow: allowExchanges,
+                        deny: disabledExchanges.length
+                          ? disabledExchanges
+                          : undefined,
+                      }
                     : undefined,
                 order: routePriority,
                 slippage: formattedSlippage,
                 fee: calculatedFee || configuredFee,
-                ...(allowBridges?.length || disabledBridges.length
-                  ? {
-                      allowBridges: allowBridges,
-                      denyBridges: disabledBridges.length
-                        ? disabledBridges
-                        : undefined,
-                    }
-                  : undefined),
-                ...(allowExchanges?.length || disabledExchanges.length
-                  ? {
-                      allowExchanges: allowExchanges,
-                      denyExchanges: disabledExchanges.length
-                        ? disabledExchanges
-                        : undefined,
-                    }
-                  : undefined),
+                executionType: disableMessageSigning ? 'transaction' : 'all',
+                ...(isPrivate && { private: true }),
               },
-              { signal }
-            )
-              .then(convertQuoteToRoute)
-              .catch(() => null)
-          : Promise.resolve(null)
-
-        // Wait for the main routes to complete first
-        const routesResult = await mainRoutesPromise
-
-        if (routesResult?.routes[0] && fromAddress) {
-          // Update local tokens cache to keep priceUSD in sync
-          const { fromToken, toToken } = routesResult.routes[0]
-          ;[fromToken, toToken].forEach((token) => {
-            // Update main tokens cache (verified)
-            queryClient.setQueriesData<TokensByChain>(
-              { queryKey: [getQueryKey('tokens', keyPrefix)] },
-              (data) => updateTokenInCache(data, token)
-            )
+            },
+            { signal }
+          )
+        : Promise.resolve(null)
 
-            // Update search tokens cache (unverified) - matches any search query
-            queryClient.setQueriesData<TokensByChain>(
-              {
-                queryKey: [getQueryKey('tokens-search', keyPrefix)],
-                exact: false,
-              },
-              (data) => updateTokenInCache(data, token)
-            )
+      const relayerQuotePromise = shouldUseRelayerQuote
+        ? getRelayerQuote(
+            sdkClient,
+            {
+              fromAddress,
+              fromAmount: fromAmount.toString(),
+              fromChain: fromChainId,
+              fromToken: fromTokenAddress,
+              toAddress,
+              toChain: toChainId,
+              toToken: toTokenAddress,
+              fromAmountForGas:
+                enabledRefuel && gasRecommendationFromAmount
+                  ? gasRecommendationFromAmount
+                  : undefined,
+              order: routePriority,
+              slippage: formattedSlippage,
+              fee: calculatedFee || configuredFee,
+              ...(allowBridges?.length || disabledBridges.length
+                ? {
+                    allowBridges: allowBridges,
+                    denyBridges: disabledBridges.length
+                      ? disabledBridges
+                      : undefined,
+                  }
+                : undefined),
+              ...(allowExchanges?.length || disabledExchanges.length
+                ? {
+                    allowExchanges: allowExchanges,
+                    denyExchanges: disabledExchanges.length
+                      ? disabledExchanges
+                      : undefined,
+                  }
+                : undefined),
+            },
+            { signal }
+          )
+            .then(convertQuoteToRoute)
+            .catch(() => null)
+        : Promise.resolve(null)
+
+      // Wait for the main routes to complete first
+      const routesResult = await mainRoutesPromise
+
+      if (routesResult?.routes[0] && fromAddress) {
+        // Update local tokens cache to keep priceUSD in sync
+        const { fromToken, toToken } = routesResult.routes[0]
+        ;[fromToken, toToken].forEach((token) => {
+          // Update main tokens cache (verified)
+          queryClient.setQueriesData<TokensByChain>(
+            { queryKey: [getQueryKey('tokens', keyPrefix)] },
+            (data) => updateTokenInCache(data, token)
+          )
 
-            queryClient.setQueriesData<Token[]>(
-              {
-                queryKey: [
-                  getQueryKey('token-balances', keyPrefix),
-                  fromAddress,
-                  token.chainId,
-                ],
-              },
-              (data) => {
-                if (data) {
-                  const clonedData = [...data]
-                  const index = clonedData.findIndex(
-                    (dataToken) => dataToken.address === token.address
-                  )
-                  if (index >= 0) {
-                    clonedData[index] = {
-                      ...clonedData[index],
-                      ...token,
-                    }
+          // Update search tokens cache (unverified) - matches any search query
+          queryClient.setQueriesData<TokensByChain>(
+            {
+              queryKey: [getQueryKey('tokens-search', keyPrefix)],
+              exact: false,
+            },
+            (data) => updateTokenInCache(data, token)
+          )
+
+          queryClient.setQueriesData<Token[]>(
+            {
+              queryKey: [
+                getQueryKey('token-balances', keyPrefix),
+                fromAddress,
+                token.chainId,
+              ],
+            },
+            (data) => {
+              if (data) {
+                const clonedData = [...data]
+                const index = clonedData.findIndex(
+                  (dataToken) => dataToken.address === token.address
+                )
+                if (index >= 0) {
+                  clonedData[index] = {
+                    ...clonedData[index],
+                    ...token,
                   }
-                  return clonedData
                 }
+                return clonedData
               }
-            )
-          })
-        }
-
-        const initialRoutes = routesResult?.routes ?? []
-
-        if (shouldUseRelayerQuote && initialRoutes.length) {
-          setIntermediateRoutes(queryKey, initialRoutes)
-          emitter.emit(WidgetEvent.AvailableRoutes, initialRoutes)
-          // Return early if we're only using main routes
-        } else if (shouldUseMainRoutes) {
-          // If we don't need relayer quote, return the initial routes
-          emitter.emit(WidgetEvent.AvailableRoutes, initialRoutes)
-          return initialRoutes
-        }
+            }
+          )
+        })
+      }
 
-        const relayerRouteResult = await relayerQuotePromise
-        // If we have a relayer route, add it to the routes array
-        if (relayerRouteResult) {
-          // Insert the relayer route at position 1 (after the first route)
-          initialRoutes.splice(1, 0, relayerRouteResult)
-          // Emit the updated routes
-          emitter.emit(WidgetEvent.AvailableRoutes, initialRoutes)
-        }
+      const initialRoutes = routesResult?.routes ?? []
 
+      if (shouldUseRelayerQuote && initialRoutes.length) {
+        setIntermediateRoutes(queryKey, initialRoutes)
+        emitter.emit(WidgetEvent.AvailableRoutes, initialRoutes)
+        // Return early if we're only using main routes
+      } else if (shouldUseMainRoutes) {
+        // If we don't need relayer quote, return the initial routes
+        emitter.emit(WidgetEvent.AvailableRoutes, initialRoutes)
         return initialRoutes
-      },
-      enabled: isEnabled,
-      staleTime: refetchTime,
-      refetchInterval(query) {
-        return Math.min(
-          Math.abs(refetchTime - (Date.now() - query.state.dataUpdatedAt)),
-          refetchTime
-        )
-      },
-      retry(failureCount, error: any) {
-        if (process.env.NODE_ENV === 'development') {
-          console.warn('Route query failed:', { failureCount, error })
-        }
-        if (failureCount >= 3) {
-          return false
-        }
-        if (error?.code === LiFiErrorCode.NotFound) {
-          return false
-        }
-        return true
-      },
-    })
+      }
+
+      const relayerRouteResult = await relayerQuotePromise
+      // If we have a relayer route, add it to the routes array
+      if (relayerRouteResult) {
+        // Insert the relayer route at position 1 (after the first route)
+        initialRoutes.splice(1, 0, relayerRouteResult)
+        // Emit the updated routes
+        emitter.emit(WidgetEvent.AvailableRoutes, initialRoutes)
+      }
+
+      return initialRoutes
+    },
+    enabled: isEnabled,
+    staleTime: refetchTime,
+    placeholderData: keepPreviousDataEnabled ? keepPreviousData : undefined,
+    refetchInterval(query) {
+      return Math.min(
+        Math.abs(refetchTime - (Date.now() - query.state.dataUpdatedAt)),
+        refetchTime
+      )
+    },
+    retry(failureCount, error: any) {
+      if (process.env.NODE_ENV === 'development') {
+        console.warn('Route query failed:', { failureCount, error })
+      }
+      if (failureCount >= 3) {
+        return false
+      }
+      if (error?.code === LiFiErrorCode.NotFound) {
+        return false
+      }
+      return true
+    },
+  })
 
   const setReviewableRoute = useCallback(
     (route: Route) => {
@@ -608,6 +642,7 @@ export const useRoutes = ({
     isLoading: isEnabled && isLoading,
     isFetching,
     isFetched,
+    isError,
     dataUpdatedAt,
     refetchTime,
     refetch,