feat: Prep FE codebase for 2 API URLs

.github/workflows/frontend-e2e-tests.yml

@@ -155,13 +155,15 @@ jobs:
         working-directory: frontend/packages/data-portal
         env:
           API_URL: ${{ vars.API_URL }}
+          API_URL_V2: ${{ vars.API_URL_V2 }}
           ENV: ${{ inputs.environment }}
 
       - name: Run E2E tests
         run: pnpm e2e --shard ${{ matrix.shardCurrent }}/${{ matrix.shardTotal }}
         working-directory: frontend/packages/data-portal
         env:
           API_URL: ${{ vars.API_URL }}
+          API_URL_V2: ${{ vars.API_URL_V2 }}
           E2E_BROWSER: ${{ matrix.browser }}
           E2E_CONFIG: ${{ secrets.E2E_CONFIG }}
           CI: true

frontend/.dockerignore

@@ -1,4 +1,5 @@
 __generated__
+__generated_v2__
 .env.example
 .eslintignore
 .gitignore

frontend/.env.example

@@ -1,4 +1,5 @@
 API_URL=https://graphql-cryoet-api.cryoet.prod.si.czi.technology/v1/graphql
+API_URL_V2=https://graphql.cryoetdataportal.czscience.com/graphql
 CLOUDWATCH_RUM_APP_ID=value
 CLOUDWATCH_RUM_APP_NAME=value
 CLOUDWATCH_RUM_IDENTITY_POOL_ID=value

frontend/.gitignore

@@ -1,3 +1,4 @@
 __generated__
+__generated_v2__
 **/*.module.css.d.ts
 node_modules/

frontend/.happy/terraform/envs/dev/main.tf

@@ -3,6 +3,9 @@
 data "aws_ssm_parameter" "graphql_endpoint" {
   name = "/cryoet-dev/graphql_endpoint"
 }
+data "aws_ssm_parameter" "graphql_endpoint_v2" {
+  name = "/cryoet-dev/graphql_endpoint_v2"
+}
 
 module "stack" {
   source           = "git@github.com:chanzuckerberg/happy//terraform/modules/happy-stack-eks?ref=happy-stack-eks-v4.31.0"
@@ -15,6 +18,7 @@ module "stack" {
   deployment_stage = "dev"
   additional_env_vars = {
     API_URL = data.aws_ssm_parameter.graphql_endpoint.value
+    API_URL_V2 = data.aws_ssm_parameter.graphql_endpoint_v2.value
     ENV = "dev"
   }
   services = {

frontend/.happy/terraform/envs/prod/main.tf

@@ -3,6 +3,9 @@
 data "aws_ssm_parameter" "graphql_endpoint" {
   name = "/cryoet-prod/graphql_endpoint"
 }
+data "aws_ssm_parameter" "graphql_endpoint_v2" {
+  name = "/cryoet-prod/graphql_endpoint_v2"
+}
 
 module "stack" {
   source           = "git@github.com:chanzuckerberg/happy//terraform/modules/happy-stack-eks?ref=happy-stack-eks-v4.31.0"
@@ -16,6 +19,7 @@ module "stack" {
   additional_env_vars = {
     ENV = "prod"
     API_URL = data.aws_ssm_parameter.graphql_endpoint.value
+    API_URL_V2 = data.aws_ssm_parameter.graphql_endpoint_v2.value
   }
   services = {
     frontend = {

frontend/.happy/terraform/envs/staging/main.tf

@@ -3,6 +3,9 @@
 data "aws_ssm_parameter" "graphql_endpoint" {
   name = "/cryoet-staging/graphql_endpoint"
 }
+data "aws_ssm_parameter" "graphql_endpoint_v2" {
+  name = "/cryoet-staging/graphql_endpoint_v2"
+}
 
 module "stack" {
   source           = "git@github.com:chanzuckerberg/happy//terraform/modules/happy-stack-eks?ref=happy-stack-eks-v4.31.0"
@@ -15,6 +18,7 @@ module "stack" {
   deployment_stage = "staging"
   additional_env_vars = {
     API_URL = data.aws_ssm_parameter.graphql_endpoint.value
+    API_URL_V2 = data.aws_ssm_parameter.graphql_endpoint_v2.value
     ENV = "staging"
   }
   services = {

frontend/packages/data-portal/.env.sample

@@ -1,4 +1,5 @@
 API_URL=https://graphql-cryoet-api.cryoet.prod.si.czi.technology/v1/graphql
+API_URL_V2=https://graphql.cryoetdataportal.czscience.com/graphql
 E2E_CONFIG={}
 LOCALHOST_PLAUSIBLE_TRACKING=false
 

frontend/packages/data-portal/.eslintignore

@@ -1,5 +1,6 @@
 .cache/
 app/__generated__
+app/__generated_v2__
 app/**/*.module.css.d.ts
 build/
 node_modules/

frontend/packages/data-portal/.prettierignore

@@ -1,4 +1,5 @@
 __generated__/
+__generated_v2__/
 **/*.module.css.d.ts
 build/
 public/build/

frontend/packages/data-portal/app/apollo.server.ts

@@ -14,3 +14,16 @@ export const apolloClient = new ApolloClient({
     uri: process.env.API_URL ?? ENVIRONMENT_CONTEXT_DEFAULT_VALUE.API_URL,
   }),
 })
+
+export const apolloClientV2 = new ApolloClient({
+  ssrMode: true,
+  defaultOptions: {
+    query: {
+      fetchPolicy: 'no-cache',
+    },
+  },
+  cache: new InMemoryCache(),
+  link: createHttpLink({
+    uri: process.env.API_URL_V2 ?? ENVIRONMENT_CONTEXT_DEFAULT_VALUE.API_URL_V2,
+  }),
+})

frontend/packages/data-portal/app/context/Environment.context.ts

@@ -1,12 +1,16 @@
 import { createContext, useContext } from 'react'
 
 export type EnvironmentContextValue = Required<
-  Pick<NodeJS.ProcessEnv, 'API_URL' | 'ENV' | 'LOCALHOST_PLAUSIBLE_TRACKING'>
+  Pick<
+    NodeJS.ProcessEnv,
+    'API_URL' | 'API_URL_V2' | 'ENV' | 'LOCALHOST_PLAUSIBLE_TRACKING'
+  >
 >
 
 export const ENVIRONMENT_CONTEXT_DEFAULT_VALUE: EnvironmentContextValue = {
   API_URL:
     'https://graphql-cryoet-api.cryoet.prod.si.czi.technology/v1/graphql',
+  API_URL_V2: 'https://graphql.cryoetdataportal.czscience.com/graphql',
   ENV: 'local',
   LOCALHOST_PLAUSIBLE_TRACKING: 'false',
 }

frontend/packages/data-portal/app/graphql/getRunByIdV2.server.ts

@@ -0,0 +1,24 @@
+import {
+  ApolloClient,
+  ApolloQueryResult,
+  NormalizedCacheObject,
+} from '@apollo/client'
+
+import { gql } from 'app/__generated_v2__'
+import { GetRunByIdV2Query } from 'app/__generated_v2__/graphql'
+
+const GET_RUN_BY_ID_QUERY_V2 = gql(`
+    query GetRunByIdV2 {
+        __typename
+    }
+`)
+
+export async function getRunById({
+  client,
+}: {
+  client: ApolloClient<NormalizedCacheObject>
+}): Promise<ApolloQueryResult<GetRunByIdV2Query>> {
+  return client.query({
+    query: GET_RUN_BY_ID_QUERY_V2,
+  })
+}

frontend/packages/data-portal/app/root.tsx

@@ -41,6 +41,7 @@ export async function loader({ request }: LoaderFunctionArgs) {
     ENV: defaults(
       {
         API_URL: process.env.API_URL,
+        API_URL_V2: process.env.API_URL_V2,
         ENV: process.env.ENV,
         LOCALHOST_PLAUSIBLE_TRACKING: process.env.LOCALHOST_PLAUSIBLE_TRACKING,
       },

frontend/packages/data-portal/codegen.ts

@@ -4,11 +4,33 @@ const SCHEMA_URL =
   process.env.API_URL ||
   'https://graphql-cryoet-api.cryoet.prod.si.czi.technology/v1/graphql'
 
+const SCHEMA_URL_V2 =
+  process.env.API_URL_V2 ||
+  'https://graphql.cryoetdataportal.czscience.com/graphql'
+
 const config: CodegenConfig = {
-  schema: SCHEMA_URL,
-  documents: ['app/**/*.{ts,tsx}'],
   generates: {
     './app/__generated__/': {
+      schema: SCHEMA_URL,
+      documents: ['app/**/*!(V2)*.{ts,tsx}'],
+      preset: 'client',
+      plugins: [],
+
+      presetConfig: {
+        gqlTagName: 'gql',
+      },
+
+      config: {
+        scalars: {
+          date: 'string',
+          numeric: 'number',
+          _numeric: 'number[][]',
+        },
+      },
+    },
+    './app/__generated_v2__/': {
+      schema: SCHEMA_URL_V2,
+      documents: ['app/**/*V2*.{ts,tsx}'],
       preset: 'client',
       plugins: [],
 

frontend/packages/data-portal/globals.d.ts

@@ -1,6 +1,7 @@
 declare namespace NodeJS {
   interface ProcessEnv {
     readonly API_URL?: string
+    readonly API_URL_V2?: string
     readonly CLOUDWATCH_RUM_APP_ID?: string
     readonly CLOUDWATCH_RUM_APP_NAME?: string
     readonly CLOUDWATCH_RUM_IDENTITY_POOL_ID?: string