feat(app): replace useLazyLoadQuery -> useLazyQuery with TTL request …

…policy

app/src/api/useLazyQuery.ts

@@ -32,7 +32,6 @@ export function useLazyQuery<TQuery extends OperationType>(
  fetchKey: useTtlLastUpdated(),
  ...options,
  });
- console.log(useTtlFetchPolicy(requestId));
 
  const setLastFetched = useSetRequestLastFetched(requestId);
  useEffect(() => {

app/src/api/useTtlFetchPolicy.ts

@@ -33,7 +33,6 @@ const requestFetchPolicy = atomFamily((requestId: RequestIdentifier) =>
 
  const lastUpdated = get(ttlLastUpdated);
  get(updateTtlEffect);
- console.log({ lastFetched, lastUpdated });
 
  return lastFetched < lastUpdated - TTL ? 'store-and-network' : 'store-or-network';
  }),

app/src/app/(modal)/[account]/receive.tsx

@@ -4,7 +4,7 @@ import { Button } from '#/Button';
 import { QrModal } from '#/QrModal';
 import { useLocalParams } from '~/hooks/useLocalParams';
 import { graphql } from 'relay-runtime';
-import { useLazyLoadQuery } from 'react-relay';
+import { useLazyQuery } from '~/api';
 import { receive_ReceiveModalQuery } from '~/api/__generated__/receive_ReceiveModalQuery.graphql';
 import { useRequestTokens } from '~/hooks/mutations/useRequestTokens';
 
@@ -20,7 +20,7 @@ export default function ReceiveModal() {
  const { account } = useLocalParams(AccountParams);
  const requestTokens = useRequestTokens();
 
- const { requestableTokens } = useLazyLoadQuery<receive_ReceiveModalQuery>(Query, {
+ const { requestableTokens } = useLazyQuery<receive_ReceiveModalQuery>(Query, {
  account,
  });
 

app/src/app/(modal)/accounts/join.tsx

@@ -14,10 +14,11 @@ import { useMemo } from 'react';
 import { View } from 'react-native';
 import { Switch, Text } from 'react-native-paper';
 import QRCode from 'react-native-qrcode-svg';
-import { useLazyLoadQuery, useSubscription } from 'react-relay';
+import { useSubscription } from 'react-relay';
 import { graphql } from 'relay-runtime';
 import { Subject } from 'rxjs';
 import { z } from 'zod';
+import { useLazyQuery } from '~/api';
 import { join_JoinAccountModalQuery } from '~/api/__generated__/join_JoinAccountModalQuery.graphql';
 import { join_JoinAccountModalSubscription } from '~/api/__generated__/join_JoinAccountModalSubscription.graphql';
 import { useScanAddress } from '~/app/scan';
@@ -65,7 +66,7 @@ function JoinAccountModal() {
 
  const setPersonal = (v: boolean) => router.setParams({ personal: v ? 'true' : 'false' });
 
- const { user } = useLazyLoadQuery<join_JoinAccountModalQuery>(Query, {});
+ const { user } = useLazyQuery<join_JoinAccountModalQuery>(Query, {});
  const linkingToken = useLinkingTokenUrl({ user });
  const value = personal ? linkingToken : approver;
 

app/src/app/(nav)/[account]/(home)/activity/index.tsx

@@ -21,7 +21,7 @@ import { NoActivity } from '#/activity/NoActivity';
 import { ListHeader } from '#/list/ListHeader';
 import { DateTime } from 'luxon';
 import { graphql } from 'relay-runtime';
-import { useLazyLoadQuery } from 'react-relay';
+import { useLazyQuery } from '~/api';
 import {
  activity_ActivityPaneQuery,
  activity_ActivityPaneQuery$data,
@@ -64,7 +64,7 @@ function ActivityPane_() {
  const { styles } = useStyles(stylesheet);
  const { account } = useLocalParams(AccountParams);
 
- const { account: a, user } = useLazyLoadQuery<activity_ActivityPaneQuery>(Query, { account });
+ const { account: a, user } = useLazyQuery<activity_ActivityPaneQuery>(Query, { account });
 
  const items = [...(a?.proposals ?? []), ...(a?.transfers ?? [])]
  .map((v) => ({ ...v, section: getItemSection(v), timestamp: asDateTime(v.timestamp) }))

app/src/app/(nav)/[account]/(home)/index.tsx

@@ -16,8 +16,8 @@ import { FlatList, View } from 'react-native';
 import { CORNER } from '@theme/paper';
 import { ITEM_LIST_GAP } from '#/layout/ItemList';
 import { graphql } from 'relay-runtime';
-import { useLazyLoadQuery } from 'react-relay';
 import { HomePaneQuery } from '~/api/__generated__/HomePaneQuery.graphql';
+import { useLazyQuery } from '~/api/useLazyQuery';
 
 const Query = graphql`
  query HomePaneQuery($account: UAddress!, $chain: Chain!) {
@@ -49,7 +49,7 @@ function HomePane_() {
  const { styles } = useStyles(stylesheet);
  const address = useLocalParams(AccountParams).account;
  const chain = asChain(address);
- const { account, user, tokens } = useLazyLoadQuery<HomePaneQuery>(Query, {
+ const { account, user, tokens } = useLazyQuery<HomePaneQuery>(Query, {
  account: address,
  chain,
  });

app/src/app/(nav)/[account]/_layout.tsx

@@ -13,7 +13,7 @@ import { AppbarHeader } from '#/Appbar/AppbarHeader';
 import { withSuspense } from '#/skeleton/withSuspense';
 import { Splash } from '#/Splash';
 import { graphql } from 'relay-runtime';
-import { useLazyLoadQuery } from 'react-relay';
+import { useLazyQuery } from '~/api';
 import { Layout_AccountLayoutQuery } from '~/api/__generated__/Layout_AccountLayoutQuery.graphql';
 
 // Must use Query.accounts to avoid potential redirect loop with LandingScreen
@@ -37,7 +37,7 @@ export function AccountLayout() {
  const params = useLocalSearchParams();
  const router = useRouter();
 
- const found = !!useLazyLoadQuery<Layout_AccountLayoutQuery>(Query, {}).accounts.find(
+ const found = !!useLazyQuery<Layout_AccountLayoutQuery>(Query, {}).accounts.find(
  (a) => a.address === account,
  );
 

app/src/app/(nav)/[account]/send.tsx

@@ -22,7 +22,7 @@ import { ScrollableScreenSurface } from '#/layout/ScrollableScreenSurface';
 import Decimal from 'decimal.js';
 import { ampli } from '~/lib/ampli';
 import { graphql } from 'relay-runtime';
-import { useLazyLoadQuery } from 'react-relay';
+import { useLazyQuery } from '~/api';
 import { send_SendScreenQuery } from '~/api/__generated__/send_SendScreenQuery.graphql';
 
 const Query = graphql`
@@ -62,7 +62,7 @@ function SendScreen() {
  const selectToken = useSelectToken();
  const selectedToken = useSelectedToken(chain);
 
- const { token, account } = useLazyLoadQuery<send_SendScreenQuery>(Query, {
+ const { token, account } = useLazyQuery<send_SendScreenQuery>(Query, {
  account: accountAddress,
  token: selectedToken,
  });

app/src/app/(nav)/[account]/settings/approver/[address].tsx

@@ -18,7 +18,7 @@ import { useSetAtom } from 'jotai';
 import { ApproverPolicies } from '#/approver/ApproverPolicies';
 import { Scrollable } from '#/Scrollable';
 import { graphql } from 'relay-runtime';
-import { useLazyLoadQuery } from 'react-relay';
+import { useLazyQuery } from '~/api';
 import { Address_ApproverSettingsQuery } from '~/api/__generated__/Address_ApproverSettingsQuery.graphql';
 import { asChain } from 'lib';
 import { ScreenSkeleton } from '#/skeleton/ScreenSkeleton';
@@ -55,7 +55,7 @@ function ApproverSettingsScreen() {
  const { address } = params;
  const showSheet = useSetAtom(SIDE_SHEET);
 
- const { account, approver, user } = useLazyLoadQuery<Address_ApproverSettingsQuery>(Query, {
+ const { account, approver, user } = useLazyQuery<Address_ApproverSettingsQuery>(Query, {
  account: params.account,
  approver: address,
  });
@@ -126,4 +126,4 @@ const styles = createStyles({
 
 export default withSuspense(ApproverSettingsScreen, <ScreenSkeleton />);
 
-export { ErrorBoundary } from '#/ErrorBoundary';
+export { ErrorBoundary } from '#/ErrorBoundary';

app/src/app/(nav)/[account]/settings/details.tsx

@@ -10,7 +10,7 @@ import { AccountNameFormField } from '#/fields/AccountNameFormField';
 import { Actions } from '#/layout/Actions';
 import { FormSubmitButton } from '#/fields/FormSubmitButton';
 import { graphql } from 'relay-runtime';
-import { useLazyLoadQuery } from 'react-relay';
+import { useLazyQuery } from '~/api';
 import { details_AccountDetailsQuery } from '~/api/__generated__/details_AccountDetailsQuery.graphql';
 import { useMutation } from '~/api';
 import { details_AccountDetailsMutation } from '~/api/__generated__/details_AccountDetailsMutation.graphql';
@@ -42,7 +42,7 @@ export default function AccountDetails() {
  const { account } = useLocalParams(AccountSettingsParams);
  const update = useMutation<details_AccountDetailsMutation>(Update);
 
- const a = useLazyLoadQuery<details_AccountDetailsQuery>(Query, { account }).account;
+ const a = useLazyQuery<details_AccountDetailsQuery>(Query, { account }).account;
 
  const { control, handleSubmit, reset } = useForm<Inputs>({ defaultValues: { name: a?.name } });
 

app/src/app/(nav)/[account]/settings/index.tsx

@@ -21,7 +21,7 @@ import { PolicyPresetKey } from '~/lib/policy/usePolicyPresets';
 import { UPGRADE_APPROVER } from 'lib';
 import { MenuOrSearchIcon } from '#/Appbar/MenuOrSearchIcon';
 import { graphql } from 'relay-runtime';
-import { useLazyLoadQuery } from 'react-relay';
+import { useLazyQuery } from '~/api';
 import { settings_AccountSettingsQuery } from '~/api/__generated__/settings_AccountSettingsQuery.graphql';
 
 const Query = graphql`
@@ -66,7 +66,7 @@ function AccountSettingsPane_() {
  const path = usePath();
  const currentRouteParams = useRouteInfo().params;
 
- const { account: a, user } = useLazyLoadQuery<settings_AccountSettingsQuery>(Query, { account });
+ const { account: a, user } = useLazyQuery<settings_AccountSettingsQuery>(Query, { account });
 
  const approvers = a.approvers.filter(
  (approver) => approver.address !== UPGRADE_APPROVER[a.chain],

app/src/app/(nav)/[account]/settings/policy/[id].tsx

@@ -10,7 +10,7 @@ import { PolicyDraft, PolicyDraftContext, policyAsDraft } from '~/lib/policy/pol
 import { atom } from 'jotai';
 import { PolicyPane } from '#/policy/PolicyPane';
 import { graphql } from 'relay-runtime';
-import { useLazyLoadQuery } from 'react-relay';
+import { useLazyQuery } from '~/api';
 import { Id_PolicyScreenQuery } from '~/api/__generated__/Id_PolicyScreenQuery.graphql';
 
 const Query = graphql`
@@ -52,7 +52,7 @@ function PolicyScreen() {
  const params = useLocalParams(PolicyScreenParams);
  const id = params.id !== 'add' ? params.id : undefined;
 
- const { account, policy, user } = useLazyLoadQuery<Id_PolicyScreenQuery>(Query, {
+ const { account, policy, user } = useLazyQuery<Id_PolicyScreenQuery>(Query, {
  account: params.account,
  policy: id ?? ZERO_UUID,
  includePolicy: !!id,

app/src/app/(nav)/[account]/swap.tsx

@@ -29,7 +29,7 @@ import { showError } from '#/provider/SnackbarProvider';
 import { estimateSwap } from '~/util/swap/syncswap/estimate';
 import { ScreenSkeleton } from '#/skeleton/ScreenSkeleton';
 import { graphql } from 'relay-runtime';
-import { useLazyLoadQuery } from 'react-relay';
+import { useLazyQuery } from '~/api';
 import { swap_SwapScreenQuery } from '~/api/__generated__/swap_SwapScreenQuery.graphql';
 
 const DownArrow = materialCommunityIcon('arrow-down-thin');
@@ -68,7 +68,7 @@ function SwapScreen() {
  const selectToken = useSelectToken();
  const swappableTokens = useSwappableTokens(chain);
 
- const query = useLazyLoadQuery<swap_SwapScreenQuery>(Query, {
+ const query = useLazyQuery<swap_SwapScreenQuery>(Query, {
  account,
  tokens: swappableTokens,
  });

app/src/app/(nav)/[account]/tokens.tsx

@@ -15,7 +15,7 @@ import { ScreenSurface } from '#/layout/ScreenSurface';
 import { MenuOrSearchIcon } from '#/Appbar/MenuOrSearchIcon';
 import { graphql } from 'relay-runtime';
 import { tokens_TokensScreenQuery } from '~/api/__generated__/tokens_TokensScreenQuery.graphql';
-import { useLazyLoadQuery } from 'react-relay';
+import { useLazyQuery } from '~/api';
 
 const Query = graphql`
  query tokens_TokensScreenQuery($account: UAddress!, $chain: Chain, $query: String) {
@@ -36,7 +36,7 @@ function TokensScreen() {
 
  const [query, setQuery] = useState('');
 
- const { tokens } = useLazyLoadQuery<tokens_TokensScreenQuery>(Query, {
+ const { tokens } = useLazyQuery<tokens_TokensScreenQuery>(Query, {
  account,
  chain: asChain(account),
  query: query || null,

app/src/app/(nav)/contacts/[address].tsx

@@ -22,7 +22,7 @@ import { Pane } from '#/layout/Pane';
 import { FormChainSelector } from '#/fields/FormChainSelector';
 import { PaneSkeleton } from '#/skeleton/PaneSkeleton';
 import { graphql } from 'relay-runtime';
-import { useLazyLoadQuery } from 'react-relay';
+import { useLazyQuery } from '~/api';
 import { Address_ContactScreenQuery } from '~/api/__generated__/Address_ContactScreenQuery.graphql';
 import { useUpsertContact } from '~/hooks/mutations/useUpsertContact';
 import { useRemoveContact } from '~/hooks/mutations/useRemoveContact';
@@ -62,7 +62,7 @@ function ContactScreen_(props: ContactScreenProps) {
  const selectedChain = useSelectedChain();
 
  const existingAddress = tryAsUAddress(props.address, props.chain);
- const query = useLazyLoadQuery<Address_ContactScreenQuery>(Query, {
+ const query = useLazyQuery<Address_ContactScreenQuery>(Query, {
  address: existingAddress ?? `zksync:${ZERO_ADDR}`,
  include: !!existingAddress,
  });

app/src/app/(nav)/contacts/index.tsx

@@ -16,7 +16,7 @@ import { Text } from 'react-native-paper';
 import { ICON_SIZE } from '@theme/paper';
 import { MenuOrSearchIcon } from '#/Appbar/MenuOrSearchIcon';
 import { graphql } from 'relay-runtime';
-import { useLazyLoadQuery } from 'react-relay';
+import { useLazyQuery } from '~/api';
 import { contacts_ContactsPaneQuery } from '~/api/__generated__/contacts_ContactsPaneQuery.graphql';
 
 const Query = graphql`
@@ -38,7 +38,7 @@ function ContactsPane_() {
 
  const [query, setQuery] = useState('');
 
- const { contacts } = useLazyLoadQuery<contacts_ContactsPaneQuery>(Query, {
+ const { contacts } = useLazyQuery<contacts_ContactsPaneQuery>(Query, {
  query: query || null,
  });
 

app/src/app/(nav)/ledger/link.tsx

@@ -16,7 +16,7 @@ import { withSuspense } from '#/skeleton/withSuspense';
 import { ScreenSkeleton } from '#/skeleton/ScreenSkeleton';
 import { ScreenSurface } from '#/layout/ScreenSurface';
 import { graphql } from 'relay-runtime';
-import { useLazyLoadQuery } from 'react-relay';
+import { useLazyQuery } from '~/api';
 import { link_LinkLedgerScreenQuery } from '~/api/__generated__/link_LinkLedgerScreenQuery.graphql';
 
 const Query = graphql`
@@ -32,7 +32,7 @@ function LinkLedgerScreen() {
  const devices =
  useObservable(useMemo(() => (hasPermission ? bleDevices() : null), [hasPermission])) ?? ok([]);
 
- const { user } = useLazyLoadQuery<link_LinkLedgerScreenQuery>(Query, {});
+ const { user } = useLazyQuery<link_LinkLedgerScreenQuery>(Query, {});
 
  return (
  <>

app/src/app/(nav)/message/[id].tsx

@@ -17,7 +17,7 @@ import { DappHeader } from '#/walletconnect/DappHeader';
 import { AccountSection } from '#/proposal/AccountSection';
 import { useRemoveMessage } from '#/message/useRemoveMessage';
 import { graphql } from 'relay-runtime';
-import { useLazyLoadQuery } from 'react-relay';
+import { useLazyQuery } from '~/api';
 import { Id_MessageScreenQuery } from '~/api/__generated__/Id_MessageScreenQuery.graphql';
 
 const Query = graphql`
@@ -53,7 +53,7 @@ const MessageScreenParams = z.object({ id: zUuid() });
 export default function MessageScreen() {
  const { id } = useLocalParams(MessageScreenParams);
 
- const { message: m, user } = useLazyLoadQuery<Id_MessageScreenQuery>(Query, { id });
+ const { message: m, user } = useLazyQuery<Id_MessageScreenQuery>(Query, { id });
  const remove = useRemoveMessage({ account: m.account, message: m });
 
  return (

app/src/app/(nav)/token/[address].tsx

@@ -22,7 +22,7 @@ import { Button } from '#/Button';
 import { ExternalLinkIcon, GenericTokenIcon } from '@theme/icons';
 import { ICON_SIZE } from '@theme/paper';
 import { graphql } from 'relay-runtime';
-import { useLazyLoadQuery } from 'react-relay';
+import { useLazyQuery } from '~/api';
 import { useUpsertToken } from '~/hooks/mutations/useUpsertToken';
 import { Address_TokenScreenQuery } from '~/api/__generated__/Address_TokenScreenQuery.graphql';
 import { useRemoveToken } from '~/hooks/mutations/useRemoveToken';
@@ -73,7 +73,7 @@ function TokenScreen_() {
  const router = useRouter();
  const chain = asChain(token);
 
- const query = useLazyLoadQuery<Address_TokenScreenQuery>(Query, { token, chain });
+ const query = useLazyQuery<Address_TokenScreenQuery>(Query, { token, chain });
  const upsert = useUpsertToken({ query });
  const remove = useRemoveToken({ query });
 

app/src/app/(nav)/transaction/[id].tsx

@@ -21,10 +21,11 @@ import { useRemoveTransaction } from '#/transaction/useRemoveTransaction';
 import { withSuspense } from '#/skeleton/withSuspense';
 import { ScreenSkeleton } from '#/skeleton/ScreenSkeleton';
 import { graphql } from 'relay-runtime';
-import { useFragment, useLazyLoadQuery, useSubscription } from 'react-relay';
+import { useFragment, useSubscription } from 'react-relay';
 import { useMemo } from 'react';
 import { Id_TransactionScreenQuery } from '~/api/__generated__/Id_TransactionScreenQuery.graphql';
 import { Id_TransactionScreen_transaction$key } from '~/api/__generated__/Id_TransactionScreen_transaction.graphql';
+import { useLazyQuery } from '~/api';
 
 const Query = graphql`
  query Id_TransactionScreenQuery($id: ID!) {
@@ -81,7 +82,7 @@ function TransactionScreen() {
  const { styles } = useStyles(stylesheet);
  const { id } = useLocalParams(TransactionScreenParams);
 
- const query = useLazyLoadQuery<Id_TransactionScreenQuery>(Query, { id });
+ const query = useLazyQuery<Id_TransactionScreenQuery>(Query, { id });
  const t = useFragment<Id_TransactionScreen_transaction$key>(Transaction, query.transaction);
  const remove = useRemoveTransaction({ account: t.account, transaction: t });
 

app/src/app/(sheet)/[account]/settings/add-approver.tsx

@@ -24,7 +24,7 @@ import { useRouter } from 'expo-router';
 import { useLinkLedger } from '#/link/ledger/LedgerItem';
 import { useSelectAddress } from '~/hooks/useSelectAddress';
 import { graphql } from 'relay-runtime';
-import { useLazyLoadQuery } from 'react-relay';
+import { useLazyQuery } from '~/api';
 import { addApprover_AddApproverSheetQuery } from '~/api/__generated__/addApprover_AddApproverSheetQuery.graphql';
 
 const Query = graphql`
@@ -42,7 +42,7 @@ function AddApproverSheet() {
  const router = useRouter();
  const selectAddress = useSelectAddress();
 
- const { user } = useLazyLoadQuery<addApprover_AddApproverSheetQuery>(Query, {});
+ const { user } = useLazyQuery<addApprover_AddApproverSheetQuery>(Query, {});
 
  const linkZallo = useLinkZallo();
  const linkLedger = useLinkLedger();

app/src/app/(sheet)/accounts.tsx

@@ -10,7 +10,7 @@ import { PressableOpacity } from '#/PressableOpacity';
 import { View } from 'react-native';
 import { AddIcon, QrCodeIcon } from '@theme/icons';
 import { graphql } from 'relay-runtime';
-import { useLazyLoadQuery } from 'react-relay';
+import { useLazyQuery } from '~/api';
 import { accounts_AccountsSheetQuery } from '~/api/__generated__/accounts_AccountsSheetQuery.graphql';
 
 const Query = graphql`
@@ -29,7 +29,7 @@ export default function AccountsSheet() {
  const router = useRouter();
  const selectedAddress = useSelectedAccount();
 
- const { accounts } = useLazyLoadQuery<accounts_AccountsSheetQuery>(Query, {});
+ const { accounts } = useLazyQuery<accounts_AccountsSheetQuery>(Query, {});
 
  const goBackOnClose = useRef(true);