feat: add typename and interface fields (typed-graphql-builder#48)

This PR adds several options that make working with unions/interfaces easier

- Add `--includeTypename` argument to include `__typename` to all output
types. This should make it easier to write queries for discriminated
unions and interfaces. Note that the typename must be included in every
object separately, e.g.
  ```typescript
let addToCartMutation = mutation(m => [m.addToCart({itemId: $('id')},
res => [
    res.message,
    res.$on('Success', s => [s.__typename]),
    res.$on('MissingItemError', s => [s.__typename]),
res.$on('InsufficientQuantityError', s => [s.__typename, s.remaining]),
  ])])

  function MyComponent() { 
    let addToCart = useMutation(addToCartMutation)
    let handler = async (id) => {
      let res = (await addToCart({id})).addToCart;
      switch (res.__typename) {
        case 'Success': return `handle success ${res.message}`;
case 'MissingItemError': return `handle missing item: ${res.message}`
case 'InsufficientQuantityError': return `handle insufficient quantity
of ${res.remaining}`;
      }
    }
    return <ui>...</ui>
  }
  ```

- Common fields in interfaces are now available at the toplevel
interface type, so they don't have to be included in `$on` calls. See
`message` in the above example. Note that this exlcudes the new
`__typename` addition for now - while it can be added, it will
unfortunately not be useful for discriminating between the types if
added at the toplevel interface type.

- Add `QueryOutputType` and `QueryInputType` to make it easier to
declare the types of a query
  ```typescript
  import {query, QueryOutputType} from './my.api.ts';
  let userQuery = query(q => [q.user({id: value}, m => [m.id, m.name])])
let MyPartialUser = QueryOutputType<typeof userQuery> // {id: string,
name: string}
  ```

Author: spion

src/cli.ts

@@ -33,6 +33,12 @@ async function main() {
       describe:
         'List of scalars in the format ScalarName=[./path/to/scalardefinition#ScalarExport]',
     },
+    includeTypename: {
+      type: 'boolean',
+      boolean: true,
+      default: false,
+      describe: 'Include the __typename field in all objects',
+    },
   }).argv
 
   try {

src/compile.ts

@@ -26,6 +26,11 @@ export type Args = {
    * A list of scalars and paths to their type definitions
    */
   scalar?: string[]
+
+  /**
+   * Should we include __typename in the fields?
+   */
+  includeTypename?: boolean
 }
 
 /**
@@ -35,7 +40,10 @@ export async function compile(args: Args) {
   const schemaData = await fetchOrRead(args)
 
   const scalars = args.scalar?.map(s => s.split('=') as [string, string])
-  const outputScript = compileSchemas(schemaData, { scalars })
+  const outputScript = compileSchemas(schemaData, {
+    scalars,
+    includeTypename: args.includeTypename,
+  })
 
   if (args.output === '') {
     console.log(outputScript)
@@ -96,6 +104,7 @@ type FieldOf<T extends SupportedExtensibleNodes> = T extends
 
 export type Options = {
   scalars?: [string, string][]
+  includeTypename?: boolean
 }
 
 /**
@@ -152,6 +161,16 @@ export function compileSchemaDefinitions(
       f1.name.value < f2.name.value ? -1 : f1.name.value > f2.name.value ? 1 : 0
     )
 
+    if (options.includeTypename && sd.kind != gq.Kind.INTERFACE_TYPE_DEFINITION) {
+      fieldList.push({
+        kind: gq.Kind.FIELD_DEFINITION,
+        name: { kind: gq.Kind.NAME, value: '__typename' },
+        type: { kind: gq.Kind.NAMED_TYPE, name: { value: 'String', kind: gq.Kind.NAME } },
+        description: { kind: gq.Kind.STRING, value: '' },
+        directives: [],
+      } as any)
+    }
+
     // Override duplicate fields
     return fieldList.filter((f, ix) => fieldList[ix + 1]?.name.value !== f.name.value)
   }
@@ -281,7 +300,7 @@ export class ${className} extends $Base<"${className}"> {
   }
 
   ${getExtendedFields(def)
-    .map(f => printField(f, className))
+    .map(f => printField(f, `"${className}"`))
     .join('\n')}
 }`
   }
@@ -321,7 +340,7 @@ export class ${className} extends $Base<"${className}"> {
       throw new Error('Attempting to generate function field definition for non-function field')
     }
   }
-  function printField(field: gq.FieldDefinitionNode, _parentName: string) {
+  function printField(field: gq.FieldDefinitionNode, typename: string) {
     const fieldTypeName = printTypeBase(field.type)
 
     let hasArgs = !!field.arguments?.length,
@@ -365,9 +384,10 @@ export class ${className} extends $Base<"${className}"> {
     }
   `
     } else {
+      let fieldType = field.name.value === '__typename' ? typename : printType(field.type)
       return `
       ${printDocumentation(field.description)}
-      get ${field.name.value}(): $Field<"${field.name.value}", ${printType(field.type)}>  {
+      get ${field.name.value}(): $Field<"${field.name.value}", ${fieldType}>  {
        return this.$_select("${field.name.value}") as any
       }`
     }
@@ -377,13 +397,18 @@ export class ${className} extends $Base<"${className}"> {
     const className = def.name.value
 
     const additionalTypes = reverseInheritanceMap.get(className) ?? []
+    const typenameList = additionalTypes.map(t => `"${t}"`).join(' | ')
+
     const InterfaceObject = `{${additionalTypes.map(t => `${t}: ${t}`)}}`
     return `
 ${printDocumentation(def.description)}
 export class ${def.name.value} extends $Interface<${InterfaceObject}, "${def.name.value}"> {
   constructor() {
     super(${InterfaceObject}, "${def.name.value}")
   }
+  ${getExtendedFields(def)
+    .map(f => printField(f, typenameList))
+    .join('\n')}
 }`
   }
 
@@ -436,7 +461,7 @@ export type ${def.name.value} = ${scalarMap.get(typeName) ?? 'unknown'}
 ${printDocumentation(def.description)}
 export class ${def.name.value} extends $Union<${UnionObject}, "${def.name.value}"> {
   constructor() {
-    super(${UnionObject})
+    super(${UnionObject}, "${def.name.value}")
   }
 }`
   }

src/preamble.src.ts

@@ -93,13 +93,16 @@ class $Base<Name extends string> {
 }
 
 // @ts-ignore
-class $Union<T, Name extends String> {
+class $Union<T, Name extends String> extends $Base<Name> {
   // @ts-ignore
-  private type!: T
+  private $$type!: T
   // @ts-ignore
-  private name!: Name
+  private $$name!: Name
+
+  constructor(private selectorClasses: { [K in keyof T]: { new (): T[K] } }, $$name: Name) {
+    super($$name)
+  }
 
-  constructor(private selectorClasses: { [K in keyof T]: { new (): T[K] } }) {}
   $on<Type extends keyof T, Sel extends Selection<T[Type]>>(
     alternative: Type,
     selectorFn: (selector: T[Type]) => [...Sel]
@@ -113,9 +116,9 @@ class $Union<T, Name extends String> {
 // @ts-ignore
 class $Interface<T, Name extends string> extends $Base<Name> {
   // @ts-ignore
-  private type!: T
+  private $$type!: T
   // @ts-ignore
-  private name!: Name
+  private $$name!: Name
 
   constructor(private selectorClasses: { [K in keyof T]: { new (): T[K] } }, $$name: Name) {
     super($$name)
@@ -327,6 +330,19 @@ export type OutputTypeOf<T> = T extends $Base<any>
   ? OutputTypeOf<Inner>
   : never
 
+export type QueryOutputType<T extends TypedDocumentNode<any>> = T extends TypedDocumentNode<
+  infer Out
+>
+  ? Out
+  : never
+
+export type QueryInputType<T extends TypedDocumentNode<any>> = T extends TypedDocumentNode<
+  any,
+  infer In
+>
+  ? In
+  : never
+
 export function fragment<T, Sel extends Selection<T>>(
   GQLType: { new (): T },
   selectFn: (selector: T) => [...Sel]

test/examples/test-sw.good.ts

@@ -1,4 +1,4 @@
-import { query, $ } from './sw.graphql.api'
+import { query, $, QueryOutputType } from './sw.graphql.api'
 import { verify } from './verify'
 
 let planetQuery = query(q => [
@@ -39,6 +39,28 @@ const nodeQueryString = `query {
   }
 }`
 
+const multiChoiceQuery = query(q => [
+  q.node({ id: 'x' }, n => [
+    n.id,
+    n.$on('Person', p => [p.birthYear, p.__typename]),
+    n.$on('Planet', p => [p.climates, p.__typename]),
+  ]),
+])
+
+type PersonOrPlanet = QueryOutputType<typeof multiChoiceQuery>
+
+declare let v: PersonOrPlanet
+
+export function test() {
+  let personOrPlanet = v.node!
+  switch (personOrPlanet.__typename) {
+    case 'Person':
+      return personOrPlanet.birthYear
+    case 'Planet':
+      return personOrPlanet.climates?.toString()
+  }
+}
+
 export default [
   verify({
     query: planetQuery,

test/index.test.ts

@@ -69,6 +69,7 @@ for (let schema of glob.sync(`./examples/*.graphql`, { cwd: __dirname })) {
       await compile({
         schema: path.join(__dirname, schema),
         output: path.join(__dirname, 'examples', `${schemaName}.api.ts`),
+        includeTypename: true,
       })
     })
 
@@ -106,7 +107,7 @@ for (let schema of glob.sync(`./examples/*.graphql`, { cwd: __dirname })) {
       t.test(`compile fails with example ${exampleName}`, async t => {
         let res = compileTs(example)
         if (res.status) {
-          t.pass('failed to compile ' + res.stdout)
+          t.pass('failed to compile ' + res.stdout.toString().substring(0, 255))
         } else {
           t.fail('bad example compiled with no errors')
         }