refactor(web): graphql-batching-and-optimisations

tractorss · tractorss · commit a623f8958d59 · 2025-01-27T16:47:50.000+05:30
diff --git a/web/package.json b/web/package.json
@@ -78,6 +78,8 @@
   },
   "dependencies": {
     "@cyntler/react-doc-viewer": "^1.17.0",
+    "@graphql-tools/batch-execute": "^9.0.11",
+    "@graphql-tools/utils": "^10.7.2",
     "@kleros/kleros-app": "workspace:^",
     "@kleros/kleros-sdk": "workspace:^",
     "@kleros/kleros-v2-contracts": "workspace:^",
diff --git a/web/src/consts/index.ts b/web/src/consts/index.ts
@@ -7,6 +7,7 @@ export { ArbitratorTypes };
 export const ONE_BASIS_POINT = 10000n;
 
 export const REFETCH_INTERVAL = 5000;
+export const STALE_TIME = 1000;
 
 export const IPFS_GATEWAY = import.meta.env.REACT_APP_IPFS_GATEWAY || "https://cdn.kleros.link";
 export const HERMES_TELEGRAM_BOT_URL =
@@ -20,7 +21,7 @@ export const GIT_URL = `https://github.com/kleros/kleros-v2/tree/${gitCommitHash
 export const RELEASE_VERSION = version;
 
 // https://www.w3.org/TR/2012/WD-html-markup-20120329/input.email.html#input.email.attrs.value.single
-// eslint-disable-next-line security/detect-unsafe-regex
+
 export const EMAIL_REGEX =
   /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
 export const TELEGRAM_REGEX = /^@\w{5,32}$/;
diff --git a/web/src/context/GraphqlBatcher.tsx b/web/src/context/GraphqlBatcher.tsx
@@ -1,12 +1,13 @@
 import React, { useMemo, createContext, useContext } from "react";
 
+import { createBatchingExecutor } from "@graphql-tools/batch-execute";
+import { AsyncExecutor, ExecutionResult } from "@graphql-tools/utils";
 import { TypedDocumentNode } from "@graphql-typed-document-node/core";
 import { create, windowedFiniteBatchScheduler, Batcher } from "@yornaath/batshit";
 import { request } from "graphql-request";
 
 import { debounceErrorToast } from "utils/debounceErrorToast";
 import { getGraphqlUrl } from "utils/getGraphqlUrl";
-
 interface IGraphqlBatcher {
   graphqlBatcher: Batcher<any, IQuery>;
 }
@@ -21,19 +22,37 @@ interface IQuery {
 
 const Context = createContext<IGraphqlBatcher | undefined>(undefined);
 
+const executor: AsyncExecutor = async ({ document, variables, extensions }) => {
+  console.log({ url: extensions.url });
+
+  try {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    //@ts-ignore
+    const result = request(extensions.url, document, variables).then((res) => ({
+      data: res,
+    })) as Promise<ExecutionResult>;
+
+    return result;
+  } catch (error) {
+    console.error("Graph error: ", { error });
+    debounceErrorToast("Graph query error: failed to fetch data.");
+    return { data: {} };
+  }
+};
+
+const myBatchExec = createBatchingExecutor(executor);
+
 const fetcher = async (queries: IQuery[]) => {
-  const promises = queries.map(async ({ id, document, variables, isDisputeTemplate, chainId }) => {
-    const url = getGraphqlUrl(isDisputeTemplate ?? false, chainId);
-    try {
-      return request(url, document, variables).then((result) => ({ id, result }));
-    } catch (error) {
-      console.error("Graph error: ", { error });
-      debounceErrorToast("Graph query error: failed to fetch data.");
-      return { id, result: {} };
-    }
-  });
-  const data = await Promise.all(promises);
-  return data;
+  const batchdata = await Promise.all(
+    queries.map(({ document, variables, isDisputeTemplate, chainId }) =>
+      myBatchExec({ document, variables, extensions: { url: getGraphqlUrl(isDisputeTemplate ?? false, chainId) } })
+    )
+  );
+
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  //@ts-ignore
+  const processedData = batchdata.map((data, index) => ({ id: queries[index].id, result: data.data }));
+  return processedData;
 };
 
 const GraphqlBatcherProvider: React.FC<{ children?: React.ReactNode }> = ({ children }) => {
diff --git a/web/src/hooks/queries/useAllCasesQuery.ts b/web/src/hooks/queries/useAllCasesQuery.ts
@@ -2,6 +2,7 @@ import { useQuery } from "@tanstack/react-query";
 
 import { useGraphqlBatcher } from "context/GraphqlBatcher";
 
+import { STALE_TIME } from "src/consts";
 import { graphql } from "src/graphql";
 import { AllCasesQuery } from "src/graphql/graphql";
 
@@ -20,6 +21,7 @@ export const useAllCasesQuery = () => {
   const { graphqlBatcher } = useGraphqlBatcher();
   return useQuery({
     queryKey: [`allCasesQuery`],
+    staleTime: STALE_TIME,
     queryFn: async () =>
       await graphqlBatcher.fetch({ id: crypto.randomUUID(), document: allCasesQuery, variables: {} }),
   });
diff --git a/web/src/hooks/queries/useClassicAppealQuery.ts b/web/src/hooks/queries/useClassicAppealQuery.ts
@@ -1,6 +1,6 @@
 import { useQuery } from "@tanstack/react-query";
 
-import { REFETCH_INTERVAL } from "consts/index";
+import { REFETCH_INTERVAL, STALE_TIME } from "consts/index";
 import { useGraphqlBatcher } from "context/GraphqlBatcher";
 
 import { graphql } from "src/graphql";
@@ -44,6 +44,7 @@ export const useClassicAppealQuery = (id?: string | number) => {
     queryKey: [`classicAppealQuery${id}`],
     enabled: isEnabled,
     refetchInterval: REFETCH_INTERVAL,
+    staleTime: STALE_TIME,
     queryFn: async () =>
       isEnabled
         ? await graphqlBatcher.fetch({
diff --git a/web/src/hooks/queries/useCourtDetails.ts b/web/src/hooks/queries/useCourtDetails.ts
@@ -1,6 +1,6 @@
 import { useQuery } from "@tanstack/react-query";
 
-import { REFETCH_INTERVAL } from "consts/index";
+import { REFETCH_INTERVAL, STALE_TIME } from "consts/index";
 import { useGraphqlBatcher } from "context/GraphqlBatcher";
 
 import { graphql } from "src/graphql";
@@ -36,6 +36,7 @@ export const useCourtDetails = (id?: string) => {
     queryKey: [`courtDetails${id}`],
     enabled: isEnabled,
     refetchInterval: REFETCH_INTERVAL,
+    staleTime: STALE_TIME,
     queryFn: async () =>
       await graphqlBatcher.fetch({ id: crypto.randomUUID(), document: courtDetailsQuery, variables: { id } }),
   });
diff --git a/web/src/hooks/queries/useCourtTree.ts b/web/src/hooks/queries/useCourtTree.ts
@@ -2,6 +2,7 @@ import { useQuery } from "@tanstack/react-query";
 
 import { useGraphqlBatcher } from "context/GraphqlBatcher";
 
+import { STALE_TIME } from "src/consts";
 import { graphql } from "src/graphql";
 import { CourtTreeQuery } from "src/graphql/graphql";
 export type { CourtTreeQuery };
@@ -39,6 +40,7 @@ export const useCourtTree = () => {
   const { graphqlBatcher } = useGraphqlBatcher();
   return useQuery<CourtTreeQuery>({
     queryKey: ["courtTreeQuery"],
+    staleTime: STALE_TIME,
     queryFn: async () =>
       await graphqlBatcher.fetch({ id: crypto.randomUUID(), document: courtTreeQuery, variables: {} }),
   });
diff --git a/web/src/hooks/queries/useDisputeDetailsQuery.ts b/web/src/hooks/queries/useDisputeDetailsQuery.ts
@@ -1,6 +1,6 @@
 import { useQuery } from "@tanstack/react-query";
 
-import { REFETCH_INTERVAL } from "consts/index";
+import { REFETCH_INTERVAL, STALE_TIME } from "consts/index";
 import { useGraphqlBatcher } from "context/GraphqlBatcher";
 
 import { graphql } from "src/graphql";
@@ -48,6 +48,7 @@ export const useDisputeDetailsQuery = (id?: string | number) => {
     queryKey: [`disputeDetailsQuery${id}`],
     enabled: isEnabled,
     refetchInterval: REFETCH_INTERVAL,
+    staleTime: STALE_TIME,
     queryFn: async () =>
       await graphqlBatcher.fetch({
         id: crypto.randomUUID(),
diff --git a/web/src/hooks/queries/useDisputeMaintenanceQuery.ts b/web/src/hooks/queries/useDisputeMaintenanceQuery.ts
@@ -2,6 +2,7 @@ import { useQuery } from "@tanstack/react-query";
 
 import { useGraphqlBatcher } from "context/GraphqlBatcher";
 
+import { STALE_TIME } from "src/consts";
 import { graphql } from "src/graphql";
 import { DisputeMaintenanceQuery } from "src/graphql/graphql";
 import { isUndefined } from "src/utils";
@@ -40,6 +41,7 @@ const useDisputeMaintenanceQuery = (id?: string) => {
   return useQuery<DisputeMaintenanceQuery>({
     queryKey: [`disputeMaintenanceQuery-${id}`],
     enabled: isEnabled,
+    staleTime: STALE_TIME,
     queryFn: async () =>
       await graphqlBatcher.fetch({
         id: crypto.randomUUID(),
diff --git a/web/src/hooks/queries/useJurorStakeDetailsQuery.ts b/web/src/hooks/queries/useJurorStakeDetailsQuery.ts
@@ -1,6 +1,6 @@
 import { useQuery } from "@tanstack/react-query";
 
-import { REFETCH_INTERVAL } from "consts/index";
+import { REFETCH_INTERVAL, STALE_TIME } from "consts/index";
 import { useGraphqlBatcher } from "context/GraphqlBatcher";
 
 import { graphql } from "src/graphql";
@@ -29,6 +29,7 @@ export const useJurorStakeDetailsQuery = (userId?: string) => {
     queryKey: [`jurorStakeDetails${userId}`],
     enabled: isEnabled,
     refetchInterval: REFETCH_INTERVAL,
+    staleTime: STALE_TIME,
     queryFn: async () =>
       await graphqlBatcher.fetch({ id: crypto.randomUUID(), document: jurorStakeDetailsQuery, variables: { userId } }),
   });
diff --git a/web/src/hooks/queries/useUser.ts b/web/src/hooks/queries/useUser.ts
@@ -3,6 +3,7 @@ import { Address } from "viem";
 
 import { useGraphqlBatcher } from "context/GraphqlBatcher";
 
+import { STALE_TIME } from "src/consts";
 import { graphql } from "src/graphql";
 import { UserQuery, Dispute_Filter, UserDisputeFilterQuery, UserDetailsFragment } from "src/graphql/graphql";
 export type { UserQuery, UserDetailsFragment };
@@ -58,6 +59,7 @@ export const useUserQuery = (address?: Address, where?: Dispute_Filter) => {
   return useQuery<UserQuery | UserDisputeFilterQuery>({
     queryKey: [`userQuery${address?.toLowerCase()}`],
     enabled: isEnabled,
+    staleTime: STALE_TIME,
     queryFn: async () =>
       await graphqlBatcher.fetch({
         id: crypto.randomUUID(),
diff --git a/web/src/hooks/queries/useVotingHistory.ts b/web/src/hooks/queries/useVotingHistory.ts
@@ -1,6 +1,6 @@
 import { useQuery } from "@tanstack/react-query";
 
-import { REFETCH_INTERVAL } from "consts/index";
+import { REFETCH_INTERVAL, STALE_TIME } from "consts/index";
 import { useGraphqlBatcher } from "context/GraphqlBatcher";
 
 import { graphql } from "src/graphql";
@@ -59,6 +59,7 @@ export const useVotingHistory = (disputeID?: string) => {
     queryKey: [`VotingHistory${disputeID}`],
     enabled: isEnabled,
     refetchInterval: REFETCH_INTERVAL,
+    staleTime: STALE_TIME,
     queryFn: async () =>
       await graphqlBatcher.fetch({ id: crypto.randomUUID(), document: votingHistoryQuery, variables: { disputeID } }),
   });
