[GSW-2407] optimize pool positions query key with scopeId (#792)

Author: tfrg

packages/web/src/hooks/pool/data/use-position-data.ts

@@ -13,6 +13,7 @@ export interface UsePositionDataOption {
   page?: number;
   limit?: number;
   withClosed?: boolean;
+  scopeId?: string;
   queryOption?: UseQueryOptions<PositionModel[], Error, PositionModel[], QueryKey>;
 }
 
@@ -48,7 +49,7 @@ export const usePositionData = (options?: UsePositionDataOption) => {
     isFetched: isFetchedPoolPositions,
     isLoading: isLoadingPoolPositions,
     refetch: refetchPooPositions,
-  } = useMakePoolPositions(rawPositions, pools, isFetchedPosition);
+  } = useMakePoolPositions(rawPositions, pools, isFetchedPosition, options?.scopeId || "");
 
   const availableStake = useMemo(() => {
     if (!isFetchedPoolPositions) {

packages/web/src/layouts/earn/containers/earn-my-position-container/EarnMyPositionContainer.tsx

@@ -65,6 +65,7 @@ const EarnMyPositionContainer: React.FC<EarnMyPositionContainerProps> = ({
     address,
     page,
     limit,
+    scopeId: "EarnMyPositionContainer",
   });
 
   const [mappedData, setMappedData] = useState<PoolPositionModel[]>([]);

packages/web/src/layouts/pool/pool-incentivize/containers/incentivize-pool-modal-container/IncentivizePoolModalContainer.tsx

@@ -52,7 +52,7 @@ const IncentivizePoolModalContainer: React.FC<IncentivizePoolModalContainerProps
 
   // refetch functions
   const { updateBalances } = useTokenData();
-  const { refetch: refetchPositions } = usePositionData({ address });
+  const { refetch: refetchPositions } = usePositionData({ address, scopeId: "IncentivizePoolModalContainer" });
 
   const { refetch: refetchPools } = useGetPoolList();
   const { refetch: refetchIncentivizePools } = useGetIncentivizePoolList();

packages/web/src/layouts/portfolio/components/wallet-my-positions-header/WalletMyPositionsHeader.tsx

@@ -20,6 +20,7 @@ const WalletMyPositionsHeader: React.FC<{ toggleClosed: () => void; isClosed: bo
     totalPositionCount,
   } = usePositionData({
     isClosed: false,
+    scopeId: "WalletMyPositionsHeader",
   });
 
   const hasClosedPositions = React.useMemo(() => {

packages/web/src/react-query/positions/use-make-pool-positions.ts

@@ -1,4 +1,3 @@
-import { useMemo } from "react";
 import { UseQueryOptions, useQuery } from "@tanstack/react-query";
 
 import { GNOT_TOKEN } from "@common/values/token-constant";
@@ -14,20 +13,11 @@ export const useMakePoolPositions = (
   positions: PositionModel[] | undefined,
   pools: PoolModel[],
   isFetchedPosition: boolean,
+  scopeId?: string,
   options?: UseQueryOptions<PoolPositionModel[], Error>,
 ) => {
-  const positionIdArray = useMemo(() => {
-    if (!positions || positions.length === 0) return [];
-    return positions.map(position => position.id);
-  }, [positions]);
-
-  const positionIds = useMemo(() => {
-    if (positionIdArray.length === 0) return "";
-    return [...positionIdArray].sort((a, b) => a - b).join(",");
-  }, [positionIdArray]);
-
   const query = useQuery<PoolPositionModel[], Error>({
-    queryKey: [QUERY_KEY.poolPositions, positionIds],
+    queryKey: [QUERY_KEY.poolPositions, scopeId],
     queryFn: async () => {
       return new Promise(resolve => {
         const poolPositions: PoolPositionModel[] = [];