feat: integrate subgraph URL management in user store and update query execution across preview tables

Author: ErwanDecoster

src/graphql/execute.ts

@@ -2,10 +2,9 @@ import type { TypedDocumentString } from './graphql'
 
 export async function execute<TResult, TVariables>(
   query: TypedDocumentString<TResult, TVariables>,
+  subgraphUrl: string,
   ...[variables]: TVariables extends Record<string, never> ? [] : [TVariables]
 ) {
-  const subgraphUrl = import.meta.env.VITE_POCO_SUBGRAPH_URL;
-
   const response = await fetch(subgraphUrl, {
     method: 'POST',
     headers: {

src/hooks/useSyncAccountWithUserStore.ts

@@ -1,18 +1,28 @@
+import { SUPPORTED_CHAINS } from '@/config';
 import { useEffect } from 'react';
 import { useAccount } from 'wagmi';
 import useUserStore from '@/stores/useUser.store';
 
 export function useSyncAccountWithUserStore() {
   const { connector, status, address, chain, isConnected } = useAccount();
-  const { setConnector, setIsConnected, setAddress, setChainId } =
-    useUserStore();
+  const {
+    setConnector,
+    setIsConnected,
+    setAddress,
+    setChainId,
+    setSubgraphUrl,
+  } = useUserStore();
 
   useEffect(() => {
     // Update userStore
     setConnector(connector);
     setIsConnected(isConnected);
     setAddress(address);
     setChainId(chain?.id);
+    const currentChain = SUPPORTED_CHAINS.find((c) => c.id === chain?.id);
+    if (currentChain) {
+      setSubgraphUrl(currentChain?.subgraphUrl);
+    }
   }, [
     connector,
     status,
@@ -23,5 +33,6 @@ export function useSyncAccountWithUserStore() {
     setIsConnected,
     setAddress,
     setChainId,
+    setSubgraphUrl,
   ]);
 }

src/modules/apps/AppsPreviewTable.tsx

@@ -15,15 +15,20 @@ import {
   TableHeader,
   TableRow,
 } from '@/components/ui/table';
+import useUserStore from '@/stores/useUser.store';
 import { formatElapsedTime } from '@/utils/formatElapsedTime';
 import { truncateAddress } from '@/utils/truncateAddress';
 import { appsQuery } from './appsQuery';
 
 export function AppsPreviewTable({ className }: { className?: string }) {
+  const { subgraphUrl } = useUserStore();
   const apps = useQuery({
     queryKey: ['apps_preview'],
     queryFn: () =>
-      execute(appsQuery, { length: PREVIEW_TABLE_LENGTH, skip: 0 }),
+      execute(appsQuery, subgraphUrl, {
+        length: PREVIEW_TABLE_LENGTH,
+        skip: 0,
+      }),
     refetchInterval: PREVIEW_TABLE_REFETCH_INTERVAL,
   });
 

src/modules/datasets/DatasetsPreviewTable.tsx

@@ -15,15 +15,20 @@ import {
   TableHeader,
   TableRow,
 } from '@/components/ui/table';
+import useUserStore from '@/stores/useUser.store';
 import { formatElapsedTime } from '@/utils/formatElapsedTime';
 import { truncateAddress } from '@/utils/truncateAddress';
 import { datasetsQuery } from './datasetsQuery';
 
 export function DatasetsPreviewTable({ className }: { className?: string }) {
+  const { subgraphUrl } = useUserStore();
   const datasets = useQuery({
     queryKey: ['datasets_preview'],
     queryFn: () =>
-      execute(datasetsQuery, { length: PREVIEW_TABLE_LENGTH, skip: 0 }),
+      execute(datasetsQuery, subgraphUrl, {
+        length: PREVIEW_TABLE_LENGTH,
+        skip: 0,
+      }),
     refetchInterval: PREVIEW_TABLE_REFETCH_INTERVAL,
   });
 

src/modules/deals/DealsPreviewTable.tsx

@@ -15,16 +15,21 @@ import {
   TableHeader,
   TableRow,
 } from '@/components/ui/table';
+import useUserStore from '@/stores/useUser.store';
 import { formatElapsedTime } from '@/utils/formatElapsedTime';
 import { truncateAddress } from '@/utils/truncateAddress';
 import { SuccessCell } from './SuccessCell';
 import { dealsQuery } from './dealsQuery';
 
 export function DealsPreviewTable({ className }: { className?: string }) {
+  const { subgraphUrl } = useUserStore();
   const deals = useQuery({
     queryKey: ['deals_preview'],
     queryFn: () =>
-      execute(dealsQuery, { length: PREVIEW_TABLE_LENGTH, skip: 0 }),
+      execute(dealsQuery, subgraphUrl, {
+        length: PREVIEW_TABLE_LENGTH,
+        skip: 0,
+      }),
     refetchInterval: PREVIEW_TABLE_REFETCH_INTERVAL,
   });
 

src/modules/tasks/TasksPreviewTable.tsx

@@ -15,15 +15,20 @@ import {
   TableHeader,
   TableRow,
 } from '@/components/ui/table';
+import useUserStore from '@/stores/useUser.store';
 import { truncateAddress } from '@/utils/truncateAddress';
 import StatusCell from './StatusCell';
 import { taskQuery } from './tasksQuery';
 
 export function TasksPreviewTable({ className }: { className?: string }) {
+  const { subgraphUrl } = useUserStore();
   const tasks = useQuery({
     queryKey: ['tasks_preview'],
     queryFn: () =>
-      execute(taskQuery, { length: PREVIEW_TABLE_LENGTH, skip: 0 }),
+      execute(taskQuery, subgraphUrl, {
+        length: PREVIEW_TABLE_LENGTH,
+        skip: 0,
+      }),
     refetchInterval: PREVIEW_TABLE_REFETCH_INTERVAL,
   });
 

src/modules/workerpools/workerpoolsPreviewTable.tsx

@@ -15,15 +15,20 @@ import {
   TableHeader,
   TableRow,
 } from '@/components/ui/table';
+import useUserStore from '@/stores/useUser.store';
 import { formatElapsedTime } from '@/utils/formatElapsedTime';
 import { truncateAddress } from '@/utils/truncateAddress';
 import { workerpoolsQuery } from './workerpoolsQuery';
 
 export function WorkerpoolsPreviewTable({ className }: { className?: string }) {
+  const { subgraphUrl } = useUserStore();
   const workerpools = useQuery({
     queryKey: ['workerpools_preview'],
     queryFn: () =>
-      execute(workerpoolsQuery, { length: PREVIEW_TABLE_LENGTH, skip: 0 }),
+      execute(workerpoolsQuery, subgraphUrl, {
+        length: PREVIEW_TABLE_LENGTH,
+        skip: 0,
+      }),
     refetchInterval: PREVIEW_TABLE_REFETCH_INTERVAL,
   });
 

src/stores/useUser.store.ts

@@ -1,3 +1,4 @@
+import { SUPPORTED_CHAINS } from '@/config';
 import { Address } from '@/types';
 import type { Connector } from 'wagmi';
 import { create } from 'zustand';
@@ -13,6 +14,8 @@ type UserState = {
   setAddress: (param: Address | undefined) => void;
   chainId: number | undefined;
   setChainId: (param: number | undefined) => void;
+  subgraphUrl: string;
+  setSubgraphUrl: (param: string) => void;
 };
 
 const useUserStore = create<UserState>((set) => ({
@@ -30,6 +33,8 @@ const useUserStore = create<UserState>((set) => ({
   setChainId: (chainId: number | undefined) => {
     set({ chainId: chainId });
   },
+  subgraphUrl: SUPPORTED_CHAINS[0].subgraphUrl,
+  setSubgraphUrl: (subgraphUrl: string) => set({ subgraphUrl }),
 }));
 
 export default useUserStore;