Better websocket effects onData + onComplete, no onCompleted (#164)

* Better websocket effects onData + onComplete, no onCompleted

* changeset

* fix type

* Update .changeset/quiet-rice-decide.md

* CI check and update

* pnpm 10

* pnpm first

* fix prettier

Author: PabloSzx

.changeset/quiet-rice-decide.md

@@ -0,0 +1,5 @@
+---
+'@soundxyz/graphql-react-ws': major
+---
+
+Better websocket effects onData + onComplete, no onCompleted renamed to onData

.github/workflows/canary.yml

@@ -21,12 +21,12 @@ jobs:
       - name: Setup PNPM
         uses: pnpm/[email protected]
         with:
-          version: 7.19.0
+          version: 10
 
       - name: Use Node
         uses: actions/setup-node@v3
         with:
-          node-version: 18.x
+          node-version: 22.x
           cache: 'pnpm'
 
       - name: Setup NPM credentials

.github/workflows/check.yml

@@ -0,0 +1,33 @@
+name: Lint & Type Check
+
+on:
+  pull_request:
+  push:
+    branches: [main]
+
+jobs:
+  lint-and-typecheck:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: 10
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: 'pnpm'
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Check Prettier formatting
+        run: pnpm prettier:check
+
+      - name: TypeScript type check
+        run: pnpm tsc --noEmit

.github/workflows/release.yml

@@ -19,12 +19,12 @@ jobs:
       - name: Setup PNPM
         uses: pnpm/[email protected]
         with:
-          version: 7.19.0
+          version: 10
 
       - name: Use Node
         uses: actions/setup-node@v3
         with:
-          node-version: 18.x
+          node-version: 22
           cache: 'pnpm'
 
       - name: Install Dependencies

examples/next/src/app/page.tsx

@@ -18,7 +18,9 @@ gql`
 `;
 
 export default function Page() {
-  const { data } = useQuery(TestDocument, {});
+  const { data } = useQuery(TestDocument, {
+    staleTime: 0,
+  });
 
   return (
     <div className={styles.container}>

packages/graphql-react-ws/src/client.ts

@@ -13,7 +13,7 @@ export type ExecutionResultWithErrors<Data> = Omit<ExecutionResult<Data, unknown
   errors: ExecutionResult['errors'];
 };
 
-export type EffectCallback<Result, Variables> = ({
+export type OnDataEffectCallback<Result, Variables> = ({
   operation,
   result,
   variables,
@@ -23,6 +23,14 @@ export type EffectCallback<Result, Variables> = ({
   variables?: Variables;
 }) => void;
 
+export type OnCompleteEffectCallback<Result, Variables> = ({
+  operation,
+  variables,
+}: {
+  operation: StringDocumentNode<Result, Variables>;
+  variables?: Variables;
+}) => void;
+
 export function GraphQLReactWS<ConnectionInitPayload extends Record<string, unknown>>({
   graphqlWsOptions,
 }: {
@@ -204,12 +212,12 @@ export function GraphQLReactWS<ConnectionInitPayload extends Record<string, unkn
       next: result => {
         generator.resolveNext(result);
 
-        const effects = effectsStore[query];
+        const effects = effectsOnDataStore[query];
 
         if (effects && result.data) {
           for (const effect of effects) {
             try {
-              Promise.all([
+              Promise.resolve(
                 effect({
                   operation: query as StringDocumentNode<unknown, unknown>,
                   result: {
@@ -218,7 +226,7 @@ export function GraphQLReactWS<ConnectionInitPayload extends Record<string, unkn
                   },
                   variables,
                 }),
-              ]).catch(() => null);
+              ).catch(() => null);
             } catch (err) {}
           }
         }
@@ -231,6 +239,21 @@ export function GraphQLReactWS<ConnectionInitPayload extends Record<string, unkn
       complete: () => {
         generator.resolveCompleted();
 
+        const effects = effectsOnCompleteStore[query];
+
+        if (effects) {
+          for (const effect of effects) {
+            try {
+              Promise.resolve(
+                effect({
+                  operation: query as StringDocumentNode<unknown, unknown>,
+                  variables,
+                }),
+              ).catch(() => null);
+            } catch (err) {}
+          }
+        }
+
         cleanupGenerator();
       },
     });
@@ -259,7 +282,12 @@ export function GraphQLReactWS<ConnectionInitPayload extends Record<string, unkn
     subscriptionsControllers: Set<AbortController>;
   };
 
-  const effectsStore: Record<string, Set<EffectCallback<unknown, unknown>> | null> = {};
+  const effectsOnDataStore: Record<string, Set<OnDataEffectCallback<unknown, unknown>> | null> = {};
+
+  const effectsOnCompleteStore: Record<
+    string,
+    Set<OnCompleteEffectCallback<unknown, unknown>> | null
+  > = {};
 
   const Effects = {
     /**
@@ -268,26 +296,54 @@ export function GraphQLReactWS<ConnectionInitPayload extends Record<string, unkn
      * It returns a callback that's going to stop the effect from being called
      *
      * @example
-     * Effects.onCompleted(TestQuery, ({ operation, result: { data }, variables }) => {
+     * Effects.onData(TestQuery, ({ operation, result: { data }, variables }) => {
      *  console.log({
      *    operation,
      *    data,
      *    variables
      *  });
      * });
      */
-    onCompleted<Result, Variables>(
+    onData<Result, Variables>(
+      operation: StringDocumentNode<Result, Variables>,
+      callback: OnDataEffectCallback<Result, Variables>,
+    ) {
+      const effects = (effectsOnDataStore[operation] ||= new Set());
+
+      effects.add(callback as OnDataEffectCallback<unknown, unknown>);
+
+      return function removeEffect() {
+        effects.delete(callback as OnDataEffectCallback<unknown, unknown>);
+
+        if (effects.size === 0) effectsOnDataStore[operation] = null;
+      };
+    },
+
+    /**
+     * Add an effect callback to be called every time the specified operation was flagged as complete or stopped
+     *
+     * It returns a callback that's going to stop the effect from being called
+     *
+     * @example
+     * Effects.onComplete(TestQuery, ({ operation, variables }) => {
+     *  console.log({
+     *    operation,
+     *    variables
+     *  });
+     * });
+     */
+    onComplete<Result, Variables>(
       operation: StringDocumentNode<Result, Variables>,
-      callback: EffectCallback<Result, Variables>,
+      callback: OnCompleteEffectCallback<Result, Variables>,
     ) {
-      const effects = (effectsStore[operation] ||= new Set());
+      const effects = (effectsOnCompleteStore[operation] ||= new Set());
 
-      effects.add(callback as EffectCallback<unknown, unknown>);
+      effects.add(callback as OnCompleteEffectCallback<unknown, unknown>);
 
       return function removeEffect() {
-        effects.delete(callback as EffectCallback<unknown, unknown>);
+        effects.delete(callback as OnCompleteEffectCallback<unknown, unknown>);
 
-        if (effects.size === 0) effectsStore[operation] = null;
+        if (effects.size === 0) effectsOnCompleteStore[operation] = null;
       };
     },
   } as const;

scripts/canary-release.js

@@ -1,59 +1,67 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
-const semver = require('semver')
-const cp = require('child_process')
-const { basename } = require('path')
+const semver = require('semver');
+const cp = require('child_process');
+const { basename } = require('path');
 
-const { read: readConfig } = require('@changesets/config')
-const readChangesets = require('@changesets/read').default
-const assembleReleasePlan = require('@changesets/assemble-release-plan').default
-const applyReleasePlan = require('@changesets/apply-release-plan').default
-const { getPackages } = require('@manypkg/get-packages')
+const { read: readConfig } = require('@changesets/config');
+const readChangesets = require('@changesets/read').default;
+const assembleReleasePlan = require('@changesets/assemble-release-plan').default;
+const applyReleasePlan = require('@changesets/apply-release-plan').default;
+const { getPackages } = require('@manypkg/get-packages');
 
 function getNewVersion(version, type) {
-  const gitHash = cp.spawnSync('git', ['rev-parse', '--short', 'HEAD']).stdout.toString().trim()
+  const gitHash = cp.spawnSync('git', ['rev-parse', '--short', 'HEAD']).stdout.toString().trim();
 
-  return semver.inc(version, `pre${type}`, true, 'alpha-' + gitHash)
+  return semver.inc(version, `pre${type}`, true, 'alpha-' + gitHash);
 }
 
 function getRelevantChangesets(baseBranch) {
   const comparePoint = cp
     .spawnSync('git', ['merge-base', `origin/${baseBranch}`, 'HEAD'])
     .stdout.toString()
-    .trim()
-  console.log('compare point', comparePoint)
+    .trim();
+  console.log('compare point', comparePoint);
   const listModifiedFiles = cp
     .spawnSync('git', ['diff', '--name-only', comparePoint])
     .stdout.toString()
     .trim()
-    .split('\n')
-  console.log('listModifiedFiles', listModifiedFiles)
+    .split('\n');
+  console.log('listModifiedFiles', listModifiedFiles);
 
-  const items = listModifiedFiles.filter((f) => f.startsWith('.changeset')).map((f) => basename(f, '.md'))
-  console.log('items', items)
+  const items = listModifiedFiles
+    .filter(f => f.startsWith('.changeset'))
+    .map(f => basename(f, '.md'));
+  console.log('items', items);
 
-  return items
+  return items;
 }
 
 async function updateVersions() {
-  const cwd = process.cwd()
-  const packages = await getPackages(cwd)
-  const config = await readConfig(cwd, packages)
-  const modifiedChangesets = getRelevantChangesets(config.baseBranch)
-  const changesets = (await readChangesets(cwd)).filter((change) => modifiedChangesets.includes(change.id))
+  const cwd = process.cwd();
+  const packages = await getPackages(cwd);
+  const config = await readConfig(cwd, packages);
+  const modifiedChangesets = getRelevantChangesets(config.baseBranch);
+  const changesets = (await readChangesets(cwd)).filter(change =>
+    modifiedChangesets.includes(change.id),
+  );
 
   if (changesets.length === 0) {
-    console.warn(`Unable to find any relevant package for canary publishing. Please make sure changesets exists!`)
-    process.exit(1)
+    console.warn(
+      `Unable to find any relevant package for canary publishing. Please make sure changesets exists!`,
+    );
+    process.exit(1);
   } else {
-    const releasePlan = assembleReleasePlan(changesets, packages, config, undefined, false)
+    const releasePlan = assembleReleasePlan(changesets, packages, config, undefined, false);
 
     if (releasePlan.releases.length === 0) {
-      console.warn(`Unable to find any relevant package for canary releasing. Please make sure changesets exists!`)
-      process.exit(1)
+      console.warn(
+        `Unable to find any relevant package for canary releasing. Please make sure changesets exists!`,
+      );
+      process.exit(1);
     } else {
       for (const release of releasePlan.releases) {
         if (release.type !== 'none') {
-          release.newVersion = getNewVersion(release.oldVersion, release.type)
+          release.newVersion = getNewVersion(release.oldVersion, release.type);
         }
       }
 
@@ -66,16 +74,16 @@ async function updateVersions() {
         },
         false,
         true,
-      )
+      );
     }
   }
 }
 
 updateVersions()
   .then(() => {
-    console.info(`Done!`)
-  })
-  .catch((err) => {
-    console.error(err)
-    process.exit(1)
+    console.info(`Done!`);
   })
+  .catch(err => {
+    console.error(err);
+    process.exit(1);
+  });