Enable keepAlive in the graphql-ws client (#1916)

Author: scott-rc

.changeset/enable-keep-alive.md

@@ -0,0 +1,9 @@
+---
+"ggt": patch
+---
+
+Enable `keepAlive` in the graphql-ws client to keep the connection alive.
+
+Users have pointed out that `ggt dev` stops receiving file updates sometimes after their computer has gone to sleep.
+
+This fixes that issue by enabling the `keepAlive` option in the graphql-ws client. This makes the client send a ping every few seconds to the server to ensure the connection is still alive. Luckily for us, we've already implemented the pong handler on our servers because we use this same pattern in our editor!

src/services/app/client.ts

@@ -1,5 +1,6 @@
 import type { ExecutionResult } from "graphql-ws";
 import { createClient } from "graphql-ws";
+import ms from "ms";
 import type { ClientRequestArgs } from "node:http";
 import PQueue from "p-queue";
 import type { Promisable } from "type-fest";
@@ -41,6 +42,7 @@ export class Client {
 
     this._graphqlWsClient = createClient({
       url: `wss://${environment.application.slug}.${config.domains.app}/edit/api/graphql-ws`, // FIXME: this assumes this is an Edit client
+      keepAlive: ms("10s"),
       shouldRetry: () => true,
       connectionParams: {
         environment: environment.name,
@@ -59,6 +61,15 @@ export class Client {
         }
       },
       on: {
+        opened: () => {
+          this.ctx.log.trace("opened");
+        },
+        ping: (received) => {
+          this.ctx.log.trace("ping", { received });
+        },
+        pong: (received) => {
+          this.ctx.log.trace("pong", { received });
+        },
         connecting: () => {
           switch (this.status) {
             case ConnectionStatus.DISCONNECTED:

vitest.config.js

@@ -3,8 +3,7 @@ import { timeoutMs } from "./spec/__support__/sleep.js";
 
 export default defineConfig({
   test: {
-    include: ["**/spec/**/*.spec.ts"],
-    exclude: [".direnv/**/*.spec.ts"],
+    include: ["./spec/**/*.spec.ts"],
     setupFiles: ["./spec/vitest.setup.ts"],
     globalSetup: "./spec/vitest.global-setup.ts",
     clearMocks: true, // so that we can `expect(someFunction).not.toHaveBeenCalled()` in tests where someFunction was called in another test