setup frontend graphql client (#87)

## Description

Sets up [Apollo Client](https://www.apollographql.com/docs/react/) for
the frontend's GraphQL client. This sets up:

- Apollo client with in memory cache
- Sets up codegen tool for generating TypeScript types from the GraphQL
schema
- Implements example of fetching GraphQL data on `/datasets` route

frontend/.dockerignore

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

frontend/.gitignore

@@ -1 +1,2 @@
+__generated__
 node_modules/

frontend/.prettierignore

@@ -1,3 +1,4 @@
+__generated__/
 build/
-public/build/
 pnpm-lock.yaml
+public/build/

frontend/packages/data-portal/.eslintignore

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

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

@@ -0,0 +1,11 @@
+import { ApolloClient, createHttpLink, InMemoryCache } from '@apollo/client'
+
+import { ENVIRONMENT_CONTEXT_DEFAULT_VALUE } from './context/Environment.context'
+
+export const apolloClient = new ApolloClient({
+  ssrMode: true,
+  cache: new InMemoryCache(),
+  link: createHttpLink({
+    uri: process.env.API_URL ?? ENVIRONMENT_CONTEXT_DEFAULT_VALUE.API_URL,
+  }),
+})

frontend/packages/data-portal/app/routes/datasets.tsx

@@ -1,5 +1,35 @@
+import { useLoaderData } from '@remix-run/react'
+import { json } from '@remix-run/server-runtime'
+import { useEffect } from 'react'
+
+import { gql } from 'app/__generated__'
+import { apolloClient } from 'app/apollo.server'
 import { Demo } from 'app/components/Demo'
 
+const GET_ALL_DATASETS_QUERY = gql(`
+  query GetDatasets {
+    datasets {
+      authors {
+        name
+      }
+    }
+  }
+`)
+
+export async function loader() {
+  const { data } = await apolloClient.query({
+    query: GET_ALL_DATASETS_QUERY,
+  })
+
+  return json(data.datasets)
+}
+
 export default function AllDatasetsPage() {
+  const data = useLoaderData<typeof loader>()
+
+  useEffect(() => {
+    console.log('dataset authors', data)
+  }, [data])
+
   return <Demo>All Datasets Page</Demo>
 }

frontend/packages/data-portal/codegen.ts

@@ -0,0 +1,23 @@
+import { CodegenConfig } from '@graphql-codegen/cli'
+
+const SCHEMA_URL =
+  process.env.API_URL ||
+  'https://graphql.cryoetdataportal.cziscience.com/v1/graphql'
+
+const config: CodegenConfig = {
+  schema: SCHEMA_URL,
+  documents: ['app/**/*.{ts,tsx}'],
+  generates: {
+    './app/__generated__/': {
+      preset: 'client',
+      plugins: [],
+      presetConfig: {
+        gqlTagName: 'gql',
+      },
+    },
+  },
+  ignoreNoDocuments: true,
+}
+
+// eslint-disable-next-line import/no-default-export
+export default config

frontend/packages/data-portal/package.json

@@ -2,11 +2,13 @@
   "name": "@cryoet-data-portal/data-portal",
   "type": "module",
   "scripts": {
-    "build": "run-p -l build:*",
-    "build:remix": "remix build",
+    "build": "run-s -l build:*",
+    "build:codegen": "graphql-codegen",
     "build:tcm": "tcm -p 'app/**/*.module.css'",
-    "clean": "del build public/build .cache/ node_modules/.cache/ app/**/*.css.d.ts",
-    "dev": "run-p -l dev:*",
+    "build:remix": "remix build",
+    "clean": "del build public/build .cache/ node_modules/.cache/",
+    "dev": "pnpm build:codegen && run-p -l dev:*",
+    "dev:codegen": "pnpm build:codegen -w",
     "dev:remix": "PORT=8080 remix dev",
     "dev:tcm": "pnpm build:tcm -w",
     "lint": "eslint --report-unused-disable-directives --max-warnings 0 .",
@@ -16,12 +18,16 @@
     "test": "jest"
   },
   "dependencies": {
+    "@apollo/client": "^3.8.4",
     "@babel/runtime": "^7.23.1",
     "@czi-sds/components": "^18.1.0",
     "@emotion/cache": "^11.11.0",
     "@emotion/react": "^11.11.1",
     "@emotion/server": "^11.11.0",
     "@emotion/styled": "^11.11.0",
+    "@graphql-codegen/cli": "^5.0.0",
+    "@graphql-codegen/client-preset": "^4.1.0",
+    "@graphql-typed-document-node/core": "^3.2.0",
     "@mui/base": "^5.0.0-beta.17",
     "@mui/icons-material": "^5.14.11",
     "@mui/lab": "^5.0.0-alpha.146",
@@ -34,6 +40,7 @@
     "@remix-run/server-runtime": "^2.0.1",
     "clsx": "^2.0.0",
     "framer-motion": "^10.16.4",
+    "graphql": "^16.8.1",
     "isbot": "^3.7.0",
     "jotai": "^2.4.3",
     "lodash": "^4.17.21",
@@ -46,6 +53,7 @@
     "tailwind-merge": "^1.14.0"
   },
   "devDependencies": {
+    "@parcel/watcher": "^2.3.0",
     "@remix-run/dev": "^2.0.1",
     "@tailwindcss/typography": "^0.5.10",
     "@testing-library/jest-dom": "^6.1.3",

frontend/packages/data-portal/remix.config.js

@@ -2,6 +2,19 @@
  * @type {import('@remix-run/dev').AppConfig}
  */
 export default {
-  serverDependenciesToBundle: [/@mui\/.*/],
+  serverDependenciesToBundle: [
+    // Apollo
+    'graphql-tag',
+    'optimism',
+    'symbol-observable',
+    'ts-invariant',
+    'tslib',
+    'zen-observable-ts',
+    /@apollo\/.*/,
+    /@wry\/.*/,
+
+    // Material UI
+    /@mui\/.*/,
+  ],
   serverMinify: true,
 }