Optimize some graphql states

apps/web/src/hooks/use-history.ts

@@ -1,7 +1,6 @@
 import { GQL_GET_HISTORY } from "../config";
 import { HistoryReqParams, HistoryResData } from "../types";
 import { useQuery } from "@apollo/client";
-import { useEffect, useState } from "react";
 import { useAccount } from "wagmi";
 
 export function useHistory(page: number, enabled?: boolean) {
@@ -17,14 +16,5 @@ export function useHistory(page: number, enabled?: boolean) {
  skip: !enabled,
  });
 
- const [data, setData] = useState(_data?.historyRecords.records ?? []);
- const [total, setTotal] = useState(_data?.historyRecords.total ?? 0);
- useEffect(() => {
- if (!loading) {
- setData(_data?.historyRecords.records ?? []);
- setTotal(_data?.historyRecords.total ?? 0);
- }
- }, [loading, _data?.historyRecords]);
-
- return { loading, data, total, refetch };
+ return { loading, data: _data?.historyRecords.records ?? [], total: _data?.historyRecords.total ?? 0, refetch };
 }

apps/web/src/hooks/use-relayers-data.ts

@@ -1,7 +1,6 @@
 import { GQL_GET_RELAYERS } from "../config";
 import { BridgeVersion, ChainConfig, RelayersReqParams, RelayersResData } from "../types";
 import { useQuery } from "@apollo/client";
-import { useEffect, useState } from "react";
 
 export function useRelayersData(
  version: BridgeVersion,
@@ -28,14 +27,10 @@ export function useRelayersData(
  fetchPolicy: "cache-and-network",
  });
 
- const [data, setData] = useState(_data?.queryLnBridgeRelayInfos.records ?? []);
- const [total, setTotal] = useState(_data?.queryLnBridgeRelayInfos.total ?? 0);
- useEffect(() => {
- if (!loading) {
- setData(_data?.queryLnBridgeRelayInfos.records ?? []);
- setTotal(_data?.queryLnBridgeRelayInfos.total ?? 0);
- }
- }, [loading, _data?.queryLnBridgeRelayInfos]);
-
- return { loading, data, total, refetch };
+ return {
+ loading,
+ data: _data?.queryLnBridgeRelayInfos.records ?? [],
+ total: _data?.queryLnBridgeRelayInfos.total ?? 0,
+ refetch,
+ };
 }

apps/web/src/hooks/use-sorted-relay-data.ts

@@ -1,30 +1,21 @@
 import { GQL_SORTED_LNBRIDGE_RELAY_INFOS } from "../config";
 import { ChainConfig, SortedLnBridgeRelayInfosReqParams, SortedLnBridgeRelayInfosResData, Token } from "../types";
 import { useQuery } from "@apollo/client";
-import { useEffect, useState } from "react";
 
 export function useSortedRelayData(amount: bigint, token: Token, sourceChain: ChainConfig, targetChain: ChainConfig) {
- const {
- loading,
- data: _data,
- refetch,
- } = useQuery<SortedLnBridgeRelayInfosResData, SortedLnBridgeRelayInfosReqParams>(GQL_SORTED_LNBRIDGE_RELAY_INFOS, {
- variables: {
- amount: amount.toString(),
- decimals: token.decimals,
- token: token.address,
- fromChain: sourceChain.network,
- toChain: targetChain.network,
+ const { loading, data, refetch } = useQuery<SortedLnBridgeRelayInfosResData, SortedLnBridgeRelayInfosReqParams>(
+ GQL_SORTED_LNBRIDGE_RELAY_INFOS,
+ {
+  variables: {
+  amount: amount.toString(),
+  decimals: token.decimals,
+  token: token.address,
+  fromChain: sourceChain.network,
+  toChain: targetChain.network,
+ },
+ fetchPolicy: "cache-and-network",
  },
- fetchPolicy: "network-only",
- });
- const [data, setData] = useState(_data);
-
- useEffect(() => {
- if (!loading) {
- setData(_data);
- }
- }, [loading, _data]);
+ );
 
  return { loading, data, refetch };
 }

apps/web/src/hooks/use-supported-chains.ts

@@ -1,23 +1,19 @@
 import { GQL_GET_SUPPORTED_CHAINS } from "../config";
 import { SupportedChainsReqParams, SupportedChainsResData, TokenCategory } from "../types";
 import { useQuery } from "@apollo/client";
-import { useEffect, useMemo, useState } from "react";
+import { useMemo } from "react";
 
 export function useSupportedChains(token: TokenCategory) {
  const { loading, data: _data } = useQuery<SupportedChainsResData, SupportedChainsReqParams>(
  GQL_GET_SUPPORTED_CHAINS,
  {
  variables: { tokenKey: token.toUpperCase() as Uppercase<TokenCategory> },
- fetchPolicy: "no-cache",
+ fetchPolicy: "cache-and-network",
  },
  );
- const [data, setData] = useState(_data?.queryLnBridgeSupportedChains || []);
 
- useEffect(() => {
- if (!loading) {
- setData(_data?.queryLnBridgeSupportedChains || []);
- }
- }, [loading, _data?.queryLnBridgeSupportedChains]);
-
- return useMemo(() => ({ loading, data }), [loading, data]);
+ return useMemo(
+ () => ({ loading, data: _data?.queryLnBridgeSupportedChains || [] }),
+ [loading, _data?.queryLnBridgeSupportedChains],
+ );
 }

apps/web/src/hooks/use-txs.ts

@@ -1,7 +1,6 @@
 import { GQL_GET_TXS } from "../config";
 import { TxsReqParams, TxsResData } from "../types";
 import { useQuery } from "@apollo/client";
-import { useEffect, useState } from "react";
 
 export function useTxs(sender: string, page: number, row = 10) {
  const {
@@ -15,15 +14,11 @@ export function useTxs(sender: string, page: number, row = 10) {
  fetchPolicy: "cache-and-network",
  });
 
- const [data, setData] = useState(_data?.historyRecords.records ?? []);
- const [total, setTotal] = useState(_data?.historyRecords.total ?? 0);
-
- useEffect(() => {
- if (!loading) {
- setData(_data?.historyRecords.records ?? []);
- setTotal(_data?.historyRecords.total ?? 0);
- }
- }, [loading, _data?.historyRecords.records, _data?.historyRecords.total]);
-
- return { loading, data, total, networkStatus, refetch };
+ return {
+ loading,
+ data: _data?.historyRecords.records ?? [],
+ total: _data?.historyRecords.total ?? 0,
+ networkStatus,
+ refetch,
+ };
 }