refactor: add custom agent to graphql client (#3603)

refactor: add custom agent to graphql client

Author: webberwang

apps/web/app/components/subscriptions.tsx

@@ -5,7 +5,7 @@ import type {
   DomainUpdatedSubscription,
 } from '@codelab/shared-domain-module/domain'
 
-import { browserApolloClient } from '@codelab/shared/infra/gql-client'
+import { browserApolloClient } from '@codelab/frontend/infra/gql-client'
 import {
   DomainCreatedDocument,
   DomainUpdatedDocument,

libs/frontend/infra/gql-client/.eslintrc.json

@@ -0,0 +1,21 @@
+{
+  "extends": ["../../../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "parserOptions": {
+        "project": ["libs/frontend/infra/gql-client/tsconfig.*?.json"]
+      },
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}

libs/frontend/infra/gql-client/README.md

@@ -0,0 +1,3 @@
+# frontend-infra-gql-client
+
+This library was generated with [Nx](https://nx.dev).

libs/frontend/infra/gql-client/project.json

@@ -0,0 +1,15 @@
+{
+  "name": "frontend-infra-gql-client",
+  "$schema": "../../../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/frontend/infra/gql-client/src",
+  "projectType": "library",
+  "tags": [
+    "projectName:frontend-infra-gql-client",
+    "projectType:library",
+    "type:concrete",
+    "layer:infra",
+    "scope:frontend"
+  ],
+  "// targets": "to see all targets run: nx show project frontend-infra-gql-client --web",
+  "targets": {}
+}

libs/shared/infra/gql-client/src/apollo.client.ts renamed to libs/frontend/infra/gql-client/src/apollo.client.ts

@@ -3,20 +3,8 @@ import { GraphQLWsLink } from '@apollo/client/link/subscriptions'
 import { getMainDefinition } from '@apollo/client/utilities'
 import { env } from '@codelab/shared/config/env'
 import { createClient } from 'graphql-ws'
-import WebSocket from 'ws'
 
-enum Environment {
-  Browser = 'browser',
-  Node = 'node',
-}
-
-interface CreateApolloClientOptions {
-  environment?: Environment
-}
-
-export const createApolloClient = ({
-  environment = Environment.Browser,
-}: CreateApolloClientOptions = {}) => {
+export const createApolloClient = () => {
   // Move port getter to a function to avoid early evaluation
   const getApiPort = () =>
     env.get('NEXT_PUBLIC_API_PORT').required().asPortNumber()
@@ -28,7 +16,6 @@ export const createApolloClient = ({
   const wsLink = new GraphQLWsLink(
     createClient({
       url: `ws://127.0.0.1:${getApiPort()}/api/v1/graphql`,
-      webSocketImpl: environment === Environment.Node ? WebSocket : undefined,
     }),
   )
 
@@ -54,12 +41,4 @@ export const createApolloClient = ({
 /**
  * Lazy load so we create the client when the environment is known
  */
-export const nodeApolloClient = () =>
-  createApolloClient({
-    environment: Environment.Node,
-  })
-
-export const browserApolloClient = () =>
-  createApolloClient({
-    environment: Environment.Browser,
-  })
+export const browserApolloClient = () => createApolloClient()

libs/frontend/infra/gql-client/src/index.ts

@@ -0,0 +1 @@
+export * from './apollo.client'

libs/frontend/infra/gql-client/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "extends": "../../../../tsconfig.base.json",
+  "compilerOptions": {
+    "module": "commonjs",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "importHelpers": true,
+    "noImplicitOverride": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "noPropertyAccessFromIndexSignature": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    }
+  ]
+}

libs/frontend/infra/gql-client/tsconfig.lib.json

@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../../dist/out-tsc",
+    "declaration": true,
+    "types": ["node"]
+  },
+  "include": ["src/**/*.ts"]
+}

libs/shared/infra/gql-client/src/graphql.client.ts

@@ -1,14 +1,32 @@
 import type { GraphQLClientResponse } from 'graphql-request/build/legacy/helpers/types'
 
+import { ApolloClient, HttpLink, InMemoryCache } from '@apollo/client/core'
 import { getEnv } from '@codelab/shared/config/env'
 import { GraphQLClient } from 'graphql-request'
 
 const graphqlUrl = getEnv().endpoint.apiGraphqlUrl
 
+/**
+ * In Node.js, the keepalive option you pass into graphql-request (or even the standard Fetch API)
+ * is a browser-specific feature—part of the web spec that allows "keepalive" requests (such as
+ * sending analytics beacons when a user closes a page). Node's underlying HTTP layer doesn't
+ * use this parameter at all.
+ */
 export const graphqlClient = new GraphQLClient(graphqlUrl.toString(), {
   errorPolicy: 'all',
+  fetch: async (...args) => {
+    // Only import node-fetch on the server side
+    if (typeof window === 'undefined') {
+      const { nodeFetch } = await import('./node-fetch')
+
+      return nodeFetch(...args)
+    }
+
+    // Use native fetch on the client side
+    return fetch(...args)
+  },
   headers: {
-    Connection: 'keep-alive',
+    // Connection: 'keep-alive',
     // 'Keep-Alive': 'timeout=60, max=1000',
   },
   keepalive: true,

libs/shared/infra/gql-client/src/index.ts

@@ -1,2 +1 @@
-export * from './apollo.client'
 export * from './graphql.client'

libs/shared/infra/gql-client/src/node-fetch.ts

@@ -0,0 +1,44 @@
+import type { RequestInit as NodeRequestInit } from 'node-fetch'
+
+import http from 'node:http'
+import https from 'node:https'
+import fetch from 'node-fetch'
+
+/**
+ * Use custom keep-alive agents to reduce 'socket hang up' errors
+ */
+const httpAgent = new http.Agent({
+  keepAlive: true,
+  maxSockets: 100,
+})
+
+const httpsAgent = new https.Agent({
+  keepAlive: true,
+  maxSockets: 100,
+})
+
+type Fetch = (input: RequestInfo | URL, init?: RequestInit) => Promise<Response>
+
+/**
+ * `fetch` from node doesn't support agent, but `node-fetch` does
+ */
+export const nodeFetch: Fetch = (input, init): Promise<Response> => {
+  const actualUrl =
+    typeof input === 'string'
+      ? new URL(input)
+      : input instanceof URL
+      ? input
+      : new URL(input.toString())
+
+  const agent = actualUrl.protocol === 'http:' ? httpAgent : httpsAgent
+
+  // The important part: cast to node-fetch's RequestInit
+  // so that 'agent' is recognized, avoiding TS errors
+  /**
+   * Convert from native fetch to node-fetch
+   */
+  return fetch(actualUrl, {
+    ...(init as NodeRequestInit),
+    agent,
+  }) as unknown as Promise<Response>
+}

package.json

@@ -210,6 +210,7 @@
     "next-plugin-svgr": "1.1.12",
     "next-seo": "6.6.0",
     "next-themes": "0.4.4",
+    "node-fetch": "^3.3.2",
     "object-typed": "1.0.0",
     "p-min-delay": "4.0.2",
     "passport": "0.7.0",

pnpm-lock.yaml

@@ -897,6 +897,9 @@
       "@codelab/frontend/infra/context": [
         "libs/frontend/infra/context/src/index.ts"
       ],
+      "@codelab/frontend/infra/gql-client": [
+        "libs/frontend/infra/gql-client/src/index.ts"
+      ],
       "@codelab/frontend/infra/logger": [
         "libs/frontend/infra/logger/src/index.ts"
       ],