feat(perf): graphql.web for smaller bundle (#1277)

Author: jasonkuhrt

examples/55_document-builder/document-builder_directive.ts

@@ -2,7 +2,6 @@
  * This example shows how to use special fields to write GraphQL document directives.
  */
 
-// import { parse, print } from 'graphql'
 import { Graffle } from '../../tests/_/schemas/pokemon/graffle/__.js'
 import { showJson } from '../$/helpers.js'
 

package.json

@@ -119,6 +119,7 @@
     "release:pr": "dripip pr"
   },
   "dependencies": {
+    "@0no-co/graphql.web": "^1.0.11",
     "@graphql-typed-document-node/core": "^3.2.0",
     "@molt/command": "^0.9.0",
     "es-toolkit": "^1.29.0",

pnpm-lock.yaml

@@ -67,16 +67,22 @@ export const toGraphQLField: GraphQLPostOperationMapper<
     }
   }
 
+  // Empty array does not work with graphql.web
+  // @see https://github.com/0no-co/graphql.web/issues/45
+  const selectionSet = selections.length === 0
+    ? undefined
+    : Nodes.SelectionSet({
+      selections,
+    })
+
   return Nodes.Field({
     name: Nodes.Name({
       value: field.name,
     }),
     alias,
     arguments: arguments_,
     directives,
-    selectionSet: Nodes.SelectionSet({
-      selections,
-    }),
+    selectionSet,
   })
 }
 

src/documentBuilder/SelectGraphQLMapper/nodes/5_Field.ts

@@ -13,7 +13,7 @@ describe(`query batch`, () => {
 
 describe(`query root field`, () => {
   test(`scalar`, async ({ kitchenSink, kitchenSinkData: db }) => {
-    await expect(kitchenSink.query.id()).resolves.toEqual(db.id1)
+    expect(await kitchenSink.query.id()).toEqual(db.id1)
   })
   test(`argument`, async ({ kitchenSink }) => {
     await expect(kitchenSink.query.stringWithArgs({ $: { id: `x` } })).resolves.toEqual(`{"id":"x"}`)

src/documentBuilder/requestMethods/requestMethods.test.ts

@@ -26,10 +26,18 @@ const injectTypenameOnRootResultFields_ = (
     switch (selection.kind) {
       case Nodes.Kind.FIELD: {
         const isResultField = Boolean(sddm.operations[operationType]?.f[selection.name.value]?.r)
+
         if (isResultField) {
+          if (selection.selectionSet === undefined) {
+            // @ts-expect-error selections is typed as readonly
+            // @see https://github.com/graphql/graphql-js/discussions/4212
+            selection.selectionSet = Nodes.SelectionSet({
+              selections: [],
+            })
+          }
           // @ts-expect-error selections is typed as readonly
           // @see https://github.com/graphql/graphql-js/discussions/4212
-          selection.selectionSet?.selections.push(Nodes.Field({ name: Nodes.Name({ value: `__typename` }) }))
+          selection.selectionSet.selections.push(Nodes.Field({ name: Nodes.Name({ value: `__typename` }) }))
         }
         continue
       }

src/extensions/SchemaErrors/injectTypenameOnRootResultFields.ts

@@ -1,4 +1,4 @@
-import { parse } from 'graphql'
+import { parse } from '@0no-co/graphql.web'
 import { describe, expect, test } from 'vitest'
 import { db } from '../../../../tests/_/schemas/db.js'
 import { schema } from '../../../../tests/_/schemas/kitchen-sink/schema.js'
@@ -27,7 +27,7 @@ describe(`document`, () => {
     })
     test(`__typename is dynamically added at runtime if missing`, async () => {
       const result = (await graffle
-        .document({ query: { x: { resultNonNull: { $: { $case: `ErrorOne` } } } } })
+        .document({ query: { x: { resultNonNull: { $: { $case: `ErrorOne` }, ___on_Object1: { id: true } } } } })
         .run()) as Errors.ContextualAggregateError
       expect(result.errors[0]).toMatchInlineSnapshot(`[Error: Failure on field resultNonNull: ErrorOne]`)
     })

src/extensions/SchemaErrors/tests/SchemaErrors.test.ts

@@ -0,0 +1,5 @@
+import { inspect } from 'node:util'
+
+export const dump = (value: unknown) => {
+  console.log(inspect(value, { depth: null }))
+}

src/lib/dump.ts

@@ -1,3 +1,4 @@
+import { parse, print as graphqlWebPrint } from '@0no-co/graphql.web'
 import {
   type ArgumentNode,
   type BooleanValueNode,
@@ -16,8 +17,6 @@ import {
   type ObjectFieldNode,
   type ObjectValueNode,
   type OperationDefinitionNode,
-  parse,
-  print as graphqlPrint,
   type SelectionSetNode,
   type StringValueNode,
   type TypeNode,
@@ -270,7 +269,7 @@ export const OperationTypeToAccessKind = {
 
 export const print = (document: TypedDocument.TypedDocumentLike): string => {
   const documentUntyped = TypedDocument.unType(document)
-  return isString(documentUntyped) ? documentUntyped : graphqlPrint(documentUntyped)
+  return isString(documentUntyped) ? documentUntyped : graphqlWebPrint(documentUntyped)
 }
 
 export const getNamedType = (type: TypeNode): NamedTypeNode => {