feat: deployment-specific codegen.ts, fixed graphqlQueryFnHelper not picking up the env vars

Author: jaybuidl

scripts/tmux-local-stack.sh

@@ -36,7 +36,7 @@ if [ $? != 0 ]; then
   (( ++index ))
   tmux select-pane -t $index -T "WEB"
   tmux send-keys -t $index 'cd web' Enter
-  tmux send-keys -t $index 'yarn generate && yarn start-local'
+  tmux send-keys -t $index 'yarn start-local'
 fi
 
 tmux attach-session -t $session

web/.env.devnet.public

@@ -0,0 +1,4 @@
+# Do not enter sensitive information here.
+export REACT_APP_DEPLOYMENT=devnet
+export REACT_APP_KLEROS_CORE_SUBGRAPH_DEVNET=https://api.thegraph.com/subgraphs/name/alcercu/kleroscoredev
+export REACT_APP_DISPUTE_TEMPLATE_ARBGOERLI_SUBGRAPH_DEVNET=https://api.thegraph.com/subgraphs/name/alcercu/disputetemplateregistryarbgrli

web/.env.local.public

@@ -0,0 +1,4 @@
+# Do not enter sensitive information here.
+export REACT_APP_DEPLOYMENT=devnet
+export REACT_APP_KLEROS_CORE_SUBGRAPH_DEVNET=http://localhost:8000/subgraphs/name/kleros/kleros-v2-core-local
+export REACT_APP_DISPUTE_TEMPLATE_ARBGOERLI_SUBGRAPH_DEVNET=https://api.thegraph.com/subgraphs/name/alcercu/disputetemplateregistryarbgrli2

web/.env.testnet.public

@@ -0,0 +1,4 @@
+# Do not enter sensitive information here.
+export REACT_APP_DEPLOYMENT=testnet
+export REACT_APP_KLEROS_CORE_SUBGRAPH_TESTNET=https://api.thegraph.com/subgraphs/name/alcercu/kleroscoretest
+export REACT_APP_DISPUTE_TEMPLATE_ARBGOERLI_SUBGRAPH_TESTNET=https://api.thegraph.com/subgraphs/name/alcercu/disputetemplateregistryarbgrli

web/codegen.ts

@@ -1,11 +1,9 @@
 import type { CodegenConfig } from "@graphql-codegen/cli";
+import { graphqlUrl } from "utils/graphqlQueryFnHelper";
 
 const config: CodegenConfig = {
   overwrite: true,
-  schema: [
-    "https://api.thegraph.com/subgraphs/name/alcercu/kleroscoretest",
-    "https://api.thegraph.com/subgraphs/name/alcercu/disputetemplateregistryarbgrli",
-  ],
+  schema: [graphqlUrl(false), graphqlUrl(true)],
   documents: "./src/hooks/queries/*.ts",
   generates: {
     "./src/graphql/": {

web/package.json

@@ -24,13 +24,16 @@
   "packageManager": "yarn@3.3.1",
   "scripts": {
     "clear": "rm -fr ../.parcel-cache dist/bundle.js",
-    "start": "yarn generate && parcel",
-    "start-local": "REACT_APP_KLEROS_CORE_SUBGRAPH_TESTNET=http://localhost:8000/subgraphs/name/kleros/kleros-v2-core-local parcel",
-    "build": "yarn generate && yarn parcel build",
+    "start": "scripts/runEnv.sh devnet 'yarn generate && parcel'",
+    "start-testnet": "scripts/runEnv.sh testnet 'yarn generate && parcel'",
+    "start-local": "scripts/runEnv.sh local 'yarn generate && parcel'",
+    "build": "yarn generate && parcel build",
+    "build-devnet": "scripts/runEnv.sh devnet 'yarn generate && parcel build'",
+    "build-testnet": "scripts/runEnv.sh testnet 'yarn generate && parcel build'",
     "check-style": "eslint 'src/**/*.{js,jsx,ts,tsx}'",
     "check-types": "tsc --noEmit",
     "generate": "yarn generate:gql && yarn generate:hooks",
-    "generate:gql": "graphql-codegen",
+    "generate:gql": "graphql-codegen --require tsconfig-paths/register",
     "generate:hooks": "NODE_NO_WARNINGS=1 wagmi generate"
   },
   "prettier": "@kleros/kleros-v2-prettier-config",

web/scripts/runEnv.sh

@@ -0,0 +1,21 @@
+#!/usr/bin/env bash
+
+SCRIPT_DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" >/dev/null 2>&1 && pwd )"
+
+deployment="$1"
+shift
+commands="$@"
+
+if [[ -z "$deployment" ]]; then
+    echo "usage: $(basename $0) <local|devnet|testnet|mainnet>"
+    exit 1
+fi
+
+valid_deployments=("local" "devnet" "testnet" "mainnet")
+if [[ ! " ${valid_deployments[@]} " =~ " ${deployment} " ]]; then
+    echo "Invalid deployment option. Please choose either: ${valid_deployments[@]}."
+    exit 1
+fi
+
+. $SCRIPT_DIR/../.env.${deployment}.public
+eval "$commands"

web/src/utils/graphqlQueryFnHelper.ts

@@ -1,23 +1,39 @@
 import request from "graphql-request";
 import { TypedDocumentNode } from "@graphql-typed-document-node/core";
 
-const DEPLOYMENT = process.env["REACT_APP_DEPLOYMENT"]?.toUpperCase() ?? "TESTNET";
+const DEPLOYMENT = process.env.REACT_APP_DEPLOYMENT?.toUpperCase() ?? "TESTNET";
 
-const CHAINID_TO_DISPUTETEMPLATE_SUBGRAPH = {
+const DEPLOYMENTS_TO_KLEROS_CORE_SUBGRAPHS = {
+  MAINNET: process.env.REACT_APP_KLEROS_CORE_SUBGRAPH_MAINNET,
+  TESTNET: process.env.REACT_APP_KLEROS_CORE_SUBGRAPH_TESTNET,
+  DEVNET: process.env.REACT_APP_KLEROS_CORE_SUBGRAPH_DEVNET,
+};
+
+const DEPLOYMENTS_TO_DISPUTE_TEMPLATE_ARBGOERLI_SUBGRAPHS = {
+  MAINNET: process.env.REACT_APP_DISPUTE_TEMPLATE_ARBGOERLI_SUBGRAPH_MAINNET,
+  TESTNET: process.env.REACT_APP_DISPUTE_TEMPLATE_ARBGOERLI_SUBGRAPH_TESTNET,
+  DEVNET: process.env.REACT_APP_DISPUTE_TEMPLATE_ARBGOERLI_SUBGRAPH_DEVNET,
+};
+
+const CHAINID_TO_DISPUTE_TEMPLATE_SUBGRAPH = {
   421613:
-    process.env[`REACT_APP_DISPUTE_TEMPLATE_ARBGOERLI_SUBGRAPH_${DEPLOYMENT}`] ??
+    DEPLOYMENTS_TO_DISPUTE_TEMPLATE_ARBGOERLI_SUBGRAPHS[DEPLOYMENT] ??
     "https://api.thegraph.com/subgraphs/name/alcercu/disputetemplateregistryarbgrli",
 };
 
+export const graphqlUrl = (isDisputeTemplate = false, chainId = 421613) => {
+  const coreUrl =
+    DEPLOYMENTS_TO_KLEROS_CORE_SUBGRAPHS[DEPLOYMENT] ??
+    "https://api.thegraph.com/subgraphs/name/alcercu/kleroscoretest";
+  return isDisputeTemplate ? CHAINID_TO_DISPUTE_TEMPLATE_SUBGRAPH[chainId] : coreUrl;
+};
+
 export const graphqlQueryFnHelper = async (
   query: TypedDocumentNode<any, any>,
   parametersObject: Record<string, any>,
   isDisputeTemplate = false,
   chainId = 421613
 ) => {
-  const coreUrl =
-    process.env[`REACT_APP_KLEROS_CORE_SUBGRAPH_${DEPLOYMENT}`] ??
-    "https://api.thegraph.com/subgraphs/name/alcercu/kleroscoretest";
-  const url = isDisputeTemplate ? CHAINID_TO_DISPUTETEMPLATE_SUBGRAPH[chainId] : coreUrl;
+  const url = graphqlUrl(isDisputeTemplate, chainId);
   return request(url, query, parametersObject);
 };