feat(package/gqty): Use GraphQLError over plain objects in defaultResponseHandler (#2058)

* feat(package/gqty): Use GraphQLError over plain objects in defaultResponseHandler

* chore(example): Update GQty clients in examples to use defaultResponseHandler

* fix(package/solid): flaky tests

Author: vicary

.changeset/angry-peaches-peel.md

@@ -0,0 +1,5 @@
+---
+'gqty': minor
+---
+
+Use GraphQLError over plain objects in defaultResponseHandler

.vscode/settings.json

@@ -1,4 +1,7 @@
 {
+  "[javascript][typescript][typescriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
   "typescript.tsdk": "node_modules/typescript/lib",
   "prettier.proseWrap": "preserve"
 }

examples/gnt/gqty/index.ts

@@ -3,11 +3,16 @@
  */
 
 import { createLogger } from '@gqty/logger';
-import { Cache, GQtyError, createClient, type QueryFetcher } from 'gqty';
 import {
+  Cache,
+  createClient,
+  defaultResponseHandler,
+  type QueryFetcher,
+} from 'gqty';
+import {
+  type GeneratedSchema,
   generatedSchema,
   scalarsEnumsHash,
-  type GeneratedSchema,
 } from './schema.generated';
 
 const queryFetcher: QueryFetcher = async function (
@@ -29,23 +34,7 @@ const queryFetcher: QueryFetcher = async function (
     ...fetchOptions,
   });
 
-  if (response.status >= 400) {
-    throw new GQtyError(
-      `GraphQL endpoint responded with HTTP status ${response.status}.`
-    );
-  }
-
-  const text = await response.text();
-
-  try {
-    return JSON.parse(text);
-  } catch {
-    throw new GQtyError(
-      `Malformed JSON response: ${
-        text.length > 50 ? text.slice(0, 50) + '...' : text
-      }`
-    );
-  }
+  return await defaultResponseHandler(response);
 };
 
 const cache = new Cache(

examples/react/src/graphql/gqty.ts

@@ -6,13 +6,16 @@
 import { createSubscriptionsClient } from '@gqty/subscriptions';
 import extractFiles from 'extract-files/extractFiles.mjs';
 import isExtractableFile from 'extract-files/isExtractableFile.mjs';
-import { Cache, createClient, LegacyQueryFetcher as QueryFetcher } from 'gqty';
 import {
-  generatedSchema,
+  Cache,
+  createClient,
+  defaultResponseHandler,
+  LegacyQueryFetcher as QueryFetcher,
+} from 'gqty';
+import {
   GeneratedSchema,
+  generatedSchema,
   scalarsEnumsHash,
-  SchemaObjectTypes,
-  SchemaObjectTypesNames,
 } from './schema.generated';
 
 const queryFetcher: QueryFetcher = async function (query, variables) {
@@ -33,10 +36,13 @@ const queryFetcher: QueryFetcher = async function (query, variables) {
     formData.append(
       'map',
       JSON.stringify(
-        [...files.values()].reduce((prev, paths, i) => {
-          prev[i + 1] = paths;
-          return prev;
-        }, {} as Record<number, string[]>)
+        [...files.values()].reduce(
+          (prev, paths, i) => {
+            prev[i + 1] = paths;
+            return prev;
+          },
+          {} as Record<number, string[]>
+        )
       )
     );
 
@@ -51,7 +57,7 @@ const queryFetcher: QueryFetcher = async function (query, variables) {
       mode: 'cors',
     });
 
-    return await response.json();
+    return await defaultResponseHandler(response);
   } else {
     const response = await fetch(endpoint, {
       method: 'POST',
@@ -65,13 +71,14 @@ const queryFetcher: QueryFetcher = async function (query, variables) {
       mode: 'cors',
     });
 
-    return await response.json();
+    return await defaultResponseHandler(response);
   }
 };
 
 const subscriptionsClient =
-  typeof window !== 'undefined'
-    ? createSubscriptionsClient({
+  typeof window === 'undefined'
+    ? undefined
+    : createSubscriptionsClient({
         wsEndpoint: () => {
           // Modify if needed
           const url = new URL('/api/graphql', window.location.href);
@@ -80,20 +87,15 @@ const subscriptionsClient =
           console.log(42, url.href);
           return url.href;
         },
-      })
-    : undefined;
+      });
 
 export const cache = new Cache(undefined, {
   maxAge: 1000,
   staleWhileRevalidate: 60 * 5000,
   normalization: true,
 });
 
-export const client = createClient<
-  GeneratedSchema,
-  SchemaObjectTypesNames,
-  SchemaObjectTypes
->({
+export const client = createClient<GeneratedSchema>({
   cache,
   schema: generatedSchema,
   scalarsEnumsHash,
@@ -105,4 +107,4 @@ const { query, mutation, mutate, subscription, resolved, refetch, track } =
   client;
 
 export * from './schema.generated';
-export { query, mutation, mutate, subscription, resolved, refetch, track };
+export { mutate, mutation, query, refetch, resolved, subscription, track };

examples/solid/src/gqty/index.ts

@@ -3,11 +3,17 @@
  */
 
 import { createSolidClient } from '@gqty/solid';
-import { Cache, GQtyError, createClient, type QueryFetcher } from 'gqty';
 import {
+  Cache,
+  createClient,
+  defaultResponseHandler,
+  GQtyError,
+  type QueryFetcher,
+} from 'gqty';
+import {
+  type GeneratedSchema,
   generatedSchema,
   scalarsEnumsHash,
-  type GeneratedSchema,
 } from './schema.generated';
 
 const queryFetcher: QueryFetcher = async function (
@@ -35,17 +41,7 @@ const queryFetcher: QueryFetcher = async function (
     );
   }
 
-  const text = await response.text();
-
-  try {
-    return JSON.parse(text);
-  } catch {
-    throw new GQtyError(
-      `Malformed JSON response: ${
-        text.length > 50 ? text.slice(0, 50) + '...' : text
-      }`
-    );
-  }
+  return await defaultResponseHandler(response);
 };
 
 const cache = new Cache(

examples/vite-react/src/gqty/index.ts

@@ -4,7 +4,7 @@
 
 import { createReactClient } from '@gqty/react';
 import type { QueryFetcher } from 'gqty';
-import { Cache, createClient } from 'gqty';
+import { Cache, createClient, defaultResponseHandler } from 'gqty';
 import type { GeneratedSchema } from './schema.generated';
 import { generatedSchema, scalarsEnumsHash } from './schema.generated';
 
@@ -27,9 +27,7 @@ const queryFetcher: QueryFetcher = async function (
     ...fetchOptions,
   });
 
-  const json = await response.json();
-
-  return json;
+  return await defaultResponseHandler(response);
 };
 
 const cache = new Cache(

packages/cli/build.ts

@@ -10,7 +10,7 @@ fs.rmSync('dist', { force: true, recursive: true });
 // tsc --emitDeclarationOnly
 // Note: Creates the target directory, and serves as a pre-build typecheck.
 tsc
-  .createProgram(['src/index.ts'], {
+  .createProgram(['src/envelop.ts', 'src/index.ts'], {
     baseUrl: '.',
     declaration: true,
     emitDeclarationOnly: true,

packages/cli/package.json

@@ -25,6 +25,11 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.mjs",
       "require": "./dist/index.js"
+    },
+    "./envelop": {
+      "types": "./dist/envelop.d.ts",
+      "import": "./dist/envelop.mjs",
+      "require": "./dist/envelop.js"
     }
   },
   "files": [

packages/gqty/src/Cache/normalization.ts

@@ -83,7 +83,11 @@ export const normalizeObject = <TData extends CacheObject>(
 
     shells.add(result);
 
-    store.set(id, result);
+    store.set(id, result, {
+      // Has to use strong reference as this is usually the only reference,
+      // the cache is referencing the object via an internal identifier string.
+      strong: true,
+    });
 
     return result;
   }

packages/gqty/src/Helpers/fetcher.ts

@@ -1,4 +1,4 @@
-import type { ExecutionResult } from 'graphql';
+import { GraphQLError, type ExecutionResult } from 'graphql';
 import { GQtyError } from '../Error';
 
 export const defaultResponseHandler = async (response: Response) => {
@@ -29,7 +29,15 @@ export const parseResponse = async (response: Response) => {
   }
 
   try {
-    return JSON.parse(text);
+    const result = JSON.parse(text);
+
+    if (Array.isArray(result?.errors)) {
+      result.errors = result.errors.map(
+        (error: any) => new GraphQLError(error.message, error)
+      );
+    }
+
+    return result;
   } catch {
     throw new GQtyError(
       `Received malformed JSON response from GraphQL endpoint: ${
@@ -56,7 +64,11 @@ export const isExecutionResult = (input: unknown): input is ExecutionResult => {
 
   const value = input as Record<string, unknown>;
 
-  return 'data' in value || Array.isArray(value.errors);
+  return (
+    'data' in value ||
+    (Array.isArray(value.errors) &&
+      value.errors.every((error) => error instanceof GraphQLError))
+  );
 };
 
 export const handleResponseErrors = (result: ExecutionResult) => {

packages/react/test/useMutation.test.tsx

@@ -1,4 +1,5 @@
 import { renderHook, waitFor } from '@testing-library/react';
+import { Cache } from 'gqty';
 import { act } from 'react';
 import { createReactTestClient } from './utils';
 
@@ -65,7 +66,17 @@ describe('useMutation', () => {
   });
 
   it('should update contents of useQuery via normalized cache', async () => {
-    const { useQuery, useMutation } = await createReactTestClient();
+    const { useQuery, useMutation } = await createReactTestClient(
+      undefined,
+      undefined,
+      undefined,
+      {
+        cache: new Cache(undefined, {
+          maxAge: Infinity,
+          normalization: true,
+        }),
+      }
+    );
     const { result: q } = renderHook(() => {
       const human = useQuery().human({ name: 'Uno' });
 

packages/solid/src/query.test.tsx

@@ -21,7 +21,7 @@ describe('createQuery', () => {
     const { createQuery } = await createMockSolidClient({
       client: {
         cache: new Cache(undefined, {
-          maxAge: 0,
+          maxAge: 100,
           staleWhileRevalidate: 5 * 30 * 1000,
         }),
         onFetch: ({ query }) => {
@@ -366,7 +366,7 @@ describe('createQuery', () => {
     const { createQuery } = await createMockSolidClient({
       client: {
         cache: new Cache(undefined, {
-          maxAge: 0,
+          maxAge: 100,
           staleWhileRevalidate: 5 * 30 * 1000,
         }),
       },
@@ -430,7 +430,7 @@ describe('createQuery', () => {
     const { createQuery } = await createMockSolidClient({
       client: {
         cache: new Cache(undefined, {
-          maxAge: 0,
+          maxAge: 100,
           staleWhileRevalidate: 5 * 30 * 1000,
         }),
       },