wip: typed-document-node plugin

Author: spion

examples/typescript-node-big-schema/src/zeus/typedDocumentNode.ts

@@ -0,0 +1,36 @@
+import type { TypedDocumentNode } from '@graphql-typed-document-node/core';
+import gql from 'graphql-tag';
+import { GraphQLTypes, InputType, ValueTypes, Zeus } from './index';
+
+// Note: turns out the generated query does NOT have any params :|
+// type ParamsType<SRC> = SRC extends [infer Params, infer Result] ? Params : { [K in keyof SRC]: ParamsType<SRC[K]> };
+
+// type PayloadType<SRC, DST> = MapType<SRC, IsPayload<DST>>;
+
+export function createTypedQuery<Z extends ValueTypes['query_root']>(
+  query: Z,
+): TypedDocumentNode<InputType<GraphQLTypes['query_root'], Z>, {}> {
+  const zeusQuery = Zeus('query', query);
+  const gqlQuery = gql(zeusQuery);
+
+  return gqlQuery;
+}
+
+// Example
+const userMemberships = createTypedQuery({
+  user: [
+    {
+      id: 'x',
+    },
+    {
+      memberships: [
+        {
+          limit: 5,
+        },
+        {
+          role: true,
+        },
+      ],
+    },
+  ],
+});

examples/typescript-node/package.json

@@ -15,6 +15,8 @@
   "dependencies": {
     "@apollo/client": "^3.4.16",
     "node-fetch": "^2.6.0",
-    "react-query": "^3.27.0"
+    "react-query": "^3.27.0",
+    "@graphql-typed-document-node/core":"^3.1.1",
+    "graphql-tag":"^2.12.6"
   }
 }

src/CLI/CLIClass.ts

@@ -8,6 +8,7 @@ import { Parser } from 'graphql-js-tree';
 import { pluginApollo } from '@/plugins/apollo';
 import { pluginReactQuery } from '@/plugins/react-query';
 import { pluginStucco } from '@/plugins/stuccoSubscriptions';
+import { pluginTypedDocumentNode } from '@/plugins/typed-document-node';
 
 /**
  * basic yargs interface
@@ -96,6 +97,9 @@ export class CLI {
     if (args.stuccoSubscriptions) {
       writeFileRecursive(path.join(pathToFile, 'zeus'), `stuccoSubscriptions.ts`, pluginStucco({ tree }).ts);
     }
+    if (args.typedDocumentNode) {
+      writeFileRecursive(path.join(pathToFile, 'zeus'), `typedDocumentNode.ts`, pluginTypedDocumentNode({ tree }).ts);
+    }
   };
 }
 

src/CLI/index.ts

@@ -1,5 +1,6 @@
 #!/usr/bin/env node
 import * as yargs from 'yargs';
+import { boolean } from 'yargs';
 import { CLI } from './CLIClass';
 const args = yargs
   .usage(
@@ -41,6 +42,11 @@ zeus [path] [output_path] [options]
     describe: 'Generate React Query useTypedQuery module',
     boolean: true,
   })
+  .option('typedDocumentNode', {
+    alias: 'td',
+    describe: 'Generate TypedDocumentNode createQuery module',
+    boolean: true,
+  })
   .option('header', {
     alias: 'h',
     describe:

src/plugins/typed-document-node/index.spec.ts

@@ -0,0 +1,26 @@
+import { Parser } from 'graphql-js-tree';
+import { pluginTypedDocumentNode } from '.';
+
+describe('plugin typed document node test', () => {
+  it('generates correct apollo plugin from the schema', () => {
+    const schema = `
+type Query{
+	people: [String!]!
+}
+type Mutation{
+	register(name: String!): String!
+}
+type Subscription{
+	registrations: [String!]!
+}
+schema{
+	query: Query
+	mutation: Mutation
+	subscription: Subscription
+}
+`;
+    const tree = Parser.parse(schema);
+    const tdnResult = pluginTypedDocumentNode({ tree });
+    expect(tdnResult.ts).toContain(`TODO`);
+  });
+});

src/plugins/typed-document-node/index.ts

@@ -0,0 +1,74 @@
+import { OperationType, ParserTree } from 'graphql-js-tree';
+
+const pluginApolloOps = ({ queryName, operation }: { queryName: string; operation: OperationType | 'LazyQuery' }) => {
+  const capitalized = operation[0].toUpperCase() + operation.slice(1);
+  const zeusOperation = operation === 'LazyQuery' ? OperationType.query : operation;
+
+  return {
+    queryName,
+    operation,
+    ts: `export function useTyped${capitalized}<Z extends ValueTypes[O], O extends "${queryName}">(
+  ${operation}: Z | ValueTypes[O],
+  options?: ${capitalized}HookOptions<InputType<GraphQLTypes[O], Z>>,
+  operationName?: string,
+) {
+  return use${capitalized}<InputType<GraphQLTypes[O], Z>>(gql(Zeus("${zeusOperation}",${operation}, operationName)), options);
+}`,
+  };
+};
+
+export const pluginTypedDocumentNode = ({ tree, esModule }: { tree: ParserTree; esModule?: boolean }) => {
+  const operationNodes = tree.nodes.filter((n) => n.type.operations);
+  const opsFunctions = operationNodes.flatMap((n) =>
+    n.type.operations!.map((o) => pluginApolloOps({ queryName: n.name, operation: o })),
+  );
+  for (const [index, o] of opsFunctions.entries()) {
+    if (o.operation === OperationType.query) {
+      opsFunctions.splice(index + 1, 0, pluginApolloOps({ queryName: o.queryName, operation: 'LazyQuery' }));
+      break;
+    }
+  }
+  const o = opsFunctions.reduce<Pick<ReturnType<typeof pluginApolloOps>, 'ts'>>(
+    (a, b) => {
+      a.ts = [a.ts, b.ts].join('\n');
+      return a;
+    },
+    { ts: '' },
+  );
+  const capitalizedOps = opsFunctions.map((o) => o.operation[0].toUpperCase() + o.operation.slice(1));
+  const jsDefsImports: string[] = [];
+  if (capitalizedOps.includes('LazyQuery')) {
+    jsDefsImports.push('QueryTuple');
+  }
+  if (capitalizedOps.includes('Query')) {
+    jsDefsImports.push('QueryResult');
+  }
+  if (capitalizedOps.includes('Mutation')) {
+    jsDefsImports.push('MutationTuple');
+  }
+  return {
+    ts: `/* eslint-disable */
+
+import type { TypedDocumentNode } from '@graphql-typed-document-node/core';
+import gql from 'graphql-tag';
+import { GraphQLTypes, InputType, Selectors, ValueTypes, Zeus } from './index${esModule ? '.js' : ''}';
+
+export const constructQuery = <T extends ValueTypes['Query']>(q: T) => {
+  const gqlString = Zeus.query(q);
+  const selector = Selectors.query(q);
+  type InferredResponseType = InputType<GraphQLTypes['Query'], typeof selector>;
+  return gql(gqlString) as TypedDocumentNode<InferredResponseType, {}>;
+};
+
+const drawCardDocument = constructQuery({
+  drawCard: {
+    Attack: true,
+    Children: true,
+    id: true,
+  },
+});
+
+${o.ts}
+`,
+  };
+};