Merge pull request #264 from zallo-labs/Z-305-fix-linking-token-not-found

Z 305 fix linking token not found

Author: hbriese

.yarn/cache/jotai-effect-npm-1.0.0-2f29823994-4393c88dea.zip

@@ -92,6 +92,7 @@
     "immer": "^10.1.1",
     "isows": "^1.0.4",
     "jotai": "^2.8.4",
+    "jotai-effect": "^1.0.0",
     "jotai-immer": "^0.4.1",
     "jwt-decode": "^4.0.0",
     "lib": "workspace:*",

app/package.json

@@ -43,13 +43,11 @@ export async function getEnvironment({ key, approver, persist }: EnvironmentConf
   if (environment) return environment;
 
   const store = new Store(recordSource, {
-    gcReleaseBufferSize: 100, // gc exempt queries
-    queryCacheExpirationTime: 10 * 60_000,
+    gcReleaseBufferSize: 100, // Queries not retained excluded from GC
     gcScheduler: (run) => {
       InteractionManager.runAfterInteractions(run);
     },
   });
-  // persist && store.notify(undefined, true); // Invalidate persisted data
 
   const network = createNetworkLayer({
     store,

app/src/api/environment.ts

@@ -1,2 +1,3 @@
 export * from './environment';
-export * from './useMutation';
+export * from './useLazyQuery';
+export * from './useMutation';

app/src/api/index.ts

@@ -0,0 +1,43 @@
+import { useLazyLoadQuery } from 'react-relay';
+import {
+  GraphQLTaggedNode,
+  OperationType,
+  VariablesOf,
+  getRequest,
+  createOperationDescriptor,
+} from 'relay-runtime';
+import {
+  useSetRequestLastFetched,
+  useTtlFetchPolicy,
+  useTtlLastUpdated,
+} from './useTtlFetchPolicy';
+import { useEffect } from 'react';
+
+export type QueryOptions = Parameters<typeof useLazyLoadQuery>[2];
+
+export function useLazyQuery<TQuery extends OperationType>(
+  gqlQuery: GraphQLTaggedNode,
+  variables: VariablesOf<TQuery>,
+  options?: QueryOptions,
+): TQuery['response'] {
+  const descriptor = createOperationDescriptor(
+    getRequest(gqlQuery),
+    variables,
+    options?.networkCacheConfig,
+  );
+  const requestId = descriptor.request.identifier;
+
+  const query = useLazyLoadQuery<TQuery>(gqlQuery, variables, {
+    fetchPolicy: useTtlFetchPolicy(requestId),
+    fetchKey: useTtlLastUpdated(),
+    ...options,
+  });
+
+  const setLastFetched = useSetRequestLastFetched(requestId);
+  useEffect(() => {
+    // Query is only fetched once per mount of a unique request
+    setLastFetched(Date.now());
+  }, [setLastFetched, requestId]);
+
+  return query;
+}

app/src/api/useLazyQuery.ts

@@ -0,0 +1,43 @@
+import { atom, useAtomValue, useSetAtom } from 'jotai';
+import { atomFamily } from 'jotai/utils';
+import { FetchPolicy } from 'relay-runtime';
+import { RequestIdentifier } from 'relay-runtime/lib/util/getRequestIdentifier';
+import { atomEffect } from 'jotai-effect';
+
+const TTL = 5 * 60_000;
+const ttlLastUpdated = atom(Date.now());
+export function useTtlLastUpdated() {
+  return useAtomValue(ttlLastUpdated);
+}
+
+const updateTtlEffect = atomEffect((get, set) => {
+  // Update TTL immediately if it's been more than TTL since last update
+  if (get.peek(ttlLastUpdated) < Date.now() - TTL) set(ttlLastUpdated, Date.now());
+
+  const timer = setInterval(() => {
+    set(ttlLastUpdated, Date.now());
+  }, TTL);
+
+  return () => clearInterval(timer);
+});
+
+const requestLastFetched = atomFamily((_requestId: RequestIdentifier) => atom<number>(0));
+
+export function useSetRequestLastFetched(id: RequestIdentifier) {
+  return useSetAtom(requestLastFetched(id));
+}
+
+const requestFetchPolicy = atomFamily((requestId: RequestIdentifier) =>
+  atom((get): FetchPolicy => {
+    const lastFetched = get(requestLastFetched(requestId));
+
+    const lastUpdated = get(ttlLastUpdated);
+    get(updateTtlEffect);
+
+    return lastFetched < lastUpdated - TTL ? 'store-and-network' : 'store-or-network';
+  }),
+);
+
+export function useTtlFetchPolicy(id: RequestIdentifier) {
+  return useAtomValue(requestFetchPolicy(id));
+}

app/src/api/useQuery.ts

@@ -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/api/useTtlFetchPolicy.ts

@@ -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/(modal)/[account]/receive.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/(modal)/accounts/join.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]/(home)/activity/index.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]/(home)/index.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]/_layout.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]/send.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/approver/[address].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/details.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]/settings/index.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]/settings/policy/[id].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,