fix: update query execution in preview tables to include chainId in query keys and invalidate query on chain update

Author: ErwanDecoster

src/hooks/useSyncAccountWithUserStore.ts

@@ -11,6 +11,7 @@ export function useSyncAccountWithUserStore() {
     setIsConnected,
     setAddress,
     setChainId,
+    chainId,
     setSubgraphUrl,
   } = useUserStore();
   const queryClient = useQueryClient();
@@ -20,12 +21,12 @@ export function useSyncAccountWithUserStore() {
     setConnector(connector);
     setIsConnected(isConnected);
     setAddress(address);
-    setChainId(chain?.id);
     const currentChain = SUPPORTED_CHAINS.find((c) => c.id === chain?.id);
     if (currentChain) {
       setSubgraphUrl(currentChain?.subgraphUrl);
-      queryClient.invalidateQueries({ queryKey: [] });
+      queryClient.invalidateQueries({ queryKey: [chainId] });
     }
+    setChainId(chain?.id);
   }, [
     connector,
     status,
@@ -38,5 +39,6 @@ export function useSyncAccountWithUserStore() {
     setChainId,
     setSubgraphUrl,
     queryClient,
+    chainId,
   ]);
 }

src/modules/apps/AppsPreviewTable.tsx

@@ -13,9 +13,9 @@ import { appsQuery } from './appsQuery';
 import { columns } from './appsTable/columns';
 
 export function AppsPreviewTable({ className }: { className?: string }) {
-  const { subgraphUrl } = useUserStore();
+  const { subgraphUrl, chainId } = useUserStore();
   const apps = useQuery({
-    queryKey: ['apps_preview'],
+    queryKey: [chainId, 'apps_preview'],
     queryFn: () =>
       execute(appsQuery, subgraphUrl, {
         length: PREVIEW_TABLE_LENGTH,

src/modules/datasets/DatasetsPreviewTable.tsx

@@ -13,9 +13,9 @@ import { datasetsQuery } from './datasetsQuery';
 import { columns } from './datasetsTable/columns';
 
 export function DatasetsPreviewTable({ className }: { className?: string }) {
-  const { subgraphUrl } = useUserStore();
+  const { subgraphUrl, chainId } = useUserStore();
   const datasets = useQuery({
-    queryKey: ['datasets_preview'],
+    queryKey: [chainId, 'datasets_preview'],
     queryFn: () =>
       execute(datasetsQuery, subgraphUrl, {
         length: PREVIEW_TABLE_LENGTH,

src/modules/deals/DealsPreviewTable.tsx

@@ -13,9 +13,9 @@ import { dealsQuery } from './dealsQuery';
 import { columns } from './dealsTable/columns';
 
 export function DealsPreviewTable({ className }: { className?: string }) {
-  const { subgraphUrl } = useUserStore();
+  const { subgraphUrl, chainId } = useUserStore();
   const deals = useQuery({
-    queryKey: ['deals_preview'],
+    queryKey: [chainId, 'deals_preview'],
     queryFn: () =>
       execute(dealsQuery, subgraphUrl, {
         length: PREVIEW_TABLE_LENGTH,

src/modules/tasks/TasksPreviewTable.tsx

@@ -13,9 +13,9 @@ import { tasksQuery } from './tasksQuery';
 import { columns } from './tasksTable/columns';
 
 export function TasksPreviewTable({ className }: { className?: string }) {
-  const { subgraphUrl } = useUserStore();
+  const { subgraphUrl, chainId } = useUserStore();
   const tasks = useQuery({
-    queryKey: ['tasks_preview'],
+    queryKey: [chainId, 'tasks_preview'],
     queryFn: () =>
       execute(tasksQuery, subgraphUrl, {
         length: PREVIEW_TABLE_LENGTH,

src/modules/workerpools/workerpoolsPreviewTable.tsx

@@ -13,9 +13,9 @@ import { workerpoolsQuery } from './workerpoolsQuery';
 import { columns } from './workerpoolsTable/columns';
 
 export function WorkerpoolsPreviewTable({ className }: { className?: string }) {
-  const { subgraphUrl } = useUserStore();
+  const { subgraphUrl, chainId } = useUserStore();
   const workerpools = useQuery({
-    queryKey: ['workerpools_preview'],
+    queryKey: [chainId, 'workerpools_preview'],
     queryFn: () =>
       execute(workerpoolsQuery, subgraphUrl, {
         length: PREVIEW_TABLE_LENGTH,

src/routes/apps.tsx

@@ -17,18 +17,18 @@ export const Route = createFileRoute('/apps')({
 });
 
 function useAppsData(currentPage: number) {
-  const { subgraphUrl } = useUserStore();
+  const { subgraphUrl, chainId } = useUserStore();
   const skip = currentPage * TABLE_LENGTH;
 
   const { data, isLoading, isRefetching, isError } = useQuery({
-    queryKey: ['apps', currentPage],
+    queryKey: [chainId, 'apps', currentPage],
     queryFn: () =>
       execute(appsQuery, subgraphUrl, { length: TABLE_LENGTH, skip }),
     refetchInterval: TABLE_REFETCH_INTERVAL,
   });
 
   const { data: nextData } = useQuery({
-    queryKey: ['apps-next', currentPage],
+    queryKey: [chainId, 'apps-next', currentPage],
     queryFn: () =>
       execute(nextAppsQuery, subgraphUrl, {
         length: TABLE_LENGTH * 2,

src/routes/datasets.tsx

@@ -17,18 +17,18 @@ export const Route = createFileRoute('/datasets')({
 });
 
 function useDatasetsData(currentPage: number) {
-  const { subgraphUrl } = useUserStore();
+  const { subgraphUrl, chainId } = useUserStore();
   const skip = currentPage * TABLE_LENGTH;
 
   const { data, isLoading, isRefetching, isError } = useQuery({
-    queryKey: ['datasets', currentPage],
+    queryKey: [chainId, 'datasets', currentPage],
     queryFn: () =>
       execute(datasetsQuery, subgraphUrl, { length: TABLE_LENGTH, skip }),
     refetchInterval: TABLE_REFETCH_INTERVAL,
   });
 
   const { data: nextData } = useQuery({
-    queryKey: ['datasets-next', currentPage],
+    queryKey: [chainId, 'datasets-next', currentPage],
     queryFn: () =>
       execute(nextDatasetsQuery, subgraphUrl, {
         length: TABLE_LENGTH * 2,

src/routes/deals.tsx

@@ -17,18 +17,18 @@ export const Route = createFileRoute('/deals')({
 });
 
 function useDealsData(currentPage: number) {
-  const { subgraphUrl } = useUserStore();
+  const { subgraphUrl, chainId } = useUserStore();
   const skip = currentPage * TABLE_LENGTH;
 
   const { data, isLoading, isRefetching, isError } = useQuery({
-    queryKey: ['deals', currentPage],
+    queryKey: [chainId, 'deals', currentPage],
     queryFn: () =>
       execute(dealsQuery, subgraphUrl, { length: TABLE_LENGTH, skip }),
     refetchInterval: TABLE_REFETCH_INTERVAL,
   });
 
   const { data: nextData } = useQuery({
-    queryKey: ['deals-next', currentPage],
+    queryKey: [chainId, 'deals-next', currentPage],
     queryFn: () =>
       execute(nextDealsQuery, subgraphUrl, {
         length: TABLE_LENGTH * 2,

src/routes/tasks.tsx

@@ -17,18 +17,18 @@ export const Route = createFileRoute('/tasks')({
 });
 
 function useTasksData(currentPage: number) {
-  const { subgraphUrl } = useUserStore();
+  const { subgraphUrl, chainId } = useUserStore();
   const skip = currentPage * TABLE_LENGTH;
 
   const { data, isLoading, isRefetching, isError } = useQuery({
-    queryKey: ['tasks', currentPage],
+    queryKey: [chainId, 'tasks', currentPage],
     queryFn: () =>
       execute(tasksQuery, subgraphUrl, { length: TABLE_LENGTH, skip }),
     refetchInterval: TABLE_REFETCH_INTERVAL,
   });
 
   const { data: nextData } = useQuery({
-    queryKey: ['tasks-next', currentPage],
+    queryKey: [chainId, 'tasks-next', currentPage],
     queryFn: () =>
       execute(nextTasksQuery, subgraphUrl, {
         length: TABLE_LENGTH * 2,