feat(web-devtools): shift-gql-request-to-server-side

web-devtools/.env.local.example

@@ -1,5 +1,5 @@
 # Do not enter sensitive information here.
 export NEXT_PUBLIC_ALCHEMY_API_KEY=
 export NEXT_PUBLIC_DEPLOYMENT=devnet
-export NEXT_PUBLIC_CORE_SUBGRAPH=https://api.studio.thegraph.com/query/61738/kleros-v2-core-devnet/version/latest
-export NEXT_PUBLIC_DRT_ARBSEPOLIA_SUBGRAPH=https://api.studio.thegraph.com/query/61738/kleros-v2-drt-arbisep-devnet/version/latest
+export CORE_SUBGRAPH=https://api.studio.thegraph.com/query/61738/kleros-v2-core-devnet/version/latest
+export DRT_ARBSEPOLIA_SUBGRAPH=https://api.studio.thegraph.com/query/61738/kleros-v2-drt-arbisep-devnet/version/latest

web-devtools/codegen.ts

@@ -1,6 +1,6 @@
 import type { CodegenConfig } from "@graphql-codegen/cli";
 
-import { getGraphqlUrl } from "./src/utils/getGraphqlUrl";
+import { getGraphqlUrl } from "./src/actions/getGraphqlUrl";
 
 const config: CodegenConfig = {
   overwrite: true,

web-devtools/src/utils/getGraphqlUrl.ts → web-devtools/src/actions/getGraphqlUrl.ts

@@ -1,16 +1,15 @@
+"use server";
 import { arbitrumSepolia, arbitrum } from "wagmi/chains";
 
 import { DEFAULT_CHAIN } from "../consts/chains";
 
 export const getGraphqlUrl = (isDisputeTemplate = false, chainId: number = DEFAULT_CHAIN) => {
   const CHAINID_TO_DISPUTE_TEMPLATE_SUBGRAPH: { [key: number]: string } = {
     [arbitrumSepolia.id]:
-      process.env.NEXT_PUBLIC_DRT_ARBSEPOLIA_SUBGRAPH ??
-      "Environment variable NEXT_PUBLIC_DRT_ARBSEPOLIA_SUBGRAPH not set.",
+      process.env.DRT_ARBSEPOLIA_SUBGRAPH ?? "Environment variable NEXT_PUBLIC_DRT_ARBSEPOLIA_SUBGRAPH not set.",
     [arbitrum.id]:
-      process.env.NEXT_PUBLIC_DRT_ARBMAINNET_SUBGRAPH ??
-      "Environment variable NEXT_PUBLIC_DRT_ARBMAINNET_SUBGRAPH not set.",
+      process.env.ARBMAINNET_SUBGRAPH ?? "Environment variable NEXT_PUBLIC_DRT_ARBMAINNET_SUBGRAPH not set.",
   };
-  const coreUrl = process.env.NEXT_PUBLIC_CORE_SUBGRAPH ?? "Environment variables NEXT_PUBLIC_CORE_SUBGRAPH not set.";
+  const coreUrl = process.env.CORE_SUBGRAPH ?? "Environment variables NEXT_PUBLIC_CORE_SUBGRAPH not set.";
   return isDisputeTemplate ? CHAINID_TO_DISPUTE_TEMPLATE_SUBGRAPH[chainId] : coreUrl;
 };

web-devtools/src/actions/gqlFetcher.ts

@@ -0,0 +1,16 @@
+"use server";
+
+import { TypedDocumentNode } from "@graphql-typed-document-node/core";
+import { request } from "graphql-request";
+
+import { getGraphqlUrl } from "./getGraphqlUrl";
+
+export const gqlRequest = async (
+  document: TypedDocumentNode<any, any>,
+  variables: Record<string, any>,
+  chainId?: number,
+  isDisputeTemplate?: boolean
+) => {
+  const url = await getGraphqlUrl(isDisputeTemplate, chainId);
+  return await request(url, document, variables);
+};

web-devtools/src/context/GraphqlBatcher.tsx

@@ -2,10 +2,9 @@ import React, { useMemo, createContext, useContext } from "react";
 
 import { TypedDocumentNode } from "@graphql-typed-document-node/core";
 import { create, windowedFiniteBatchScheduler, Batcher } from "@yornaath/batshit";
-import { request } from "graphql-request";
+import { gqlRequest } from "actions/gqlFetcher";
 
 import { debounceErrorToast } from "utils/debounceErrorToast";
-import { getGraphqlUrl } from "utils/getGraphqlUrl";
 
 interface IGraphqlBatcher {
   graphqlBatcher: Batcher<any, IQuery>;
@@ -23,9 +22,8 @@ const Context = createContext<IGraphqlBatcher | undefined>(undefined);
 
 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 }));
+      return await gqlRequest(document, variables, chainId, isDisputeTemplate).then((result) => ({ id, result }));
     } catch (error) {
       console.error("Graph error: ", { error });
       debounceErrorToast("Graph query error: failed to fetch data.");