@graphcommerce/graphql-codegen-relay-optimizer-plugin 2.101.3 → 2.102.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graphcommerce/graphql-codegen-relay-optimizer-plugin",
-  "version": "2.101.3",
+  "version": "2.102.0",
   "description": "GraphQL Code Generator plugin for optimizing your GraphQL queries relay style.",
   "license": "MIT",
   "main": "dist/main/index.js",
@@ -20,10 +20,10 @@
     "relay-compiler": "12.0.0"
   },
   "devDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^3.0.2",
+    "@graphcommerce/eslint-config-pwa": "^3.0.3",
     "@graphcommerce/prettier-config-pwa": "^3.0.2",
     "@graphql-codegen/testing": "1.17.7",
-    "@types/jest": "27.0.1",
+    "@types/jest": "27.0.2",
     "@types/relay-compiler": "8.0.1",
     "graphql": "^15.6.0",
     "jest": "27.2.2",
@@ -36,7 +36,8 @@
     "build:module": "tsc --target es2017 --outDir dist/module",
     "build:main": "tsc --target es5 --outDir dist/main",
     "build": "yarn build:module && yarn build:main",
-    "prepare": "yarn build"
+    "prepack": "yarn build",
+    "postinstall": "yarn build"
   },
   "prettier": "@graphcommerce/prettier-config-pwa",
   "browserslist": [
@@ -53,8 +54,9 @@
   },
   "files": [
     "dist/**/*",
+    "src",
     "LICENSE",
     "README.md"
   ],
-  "gitHead": "aba0a6340e2d098313f1c25cc2047c18e5ea5db5"
+  "gitHead": "1345d9b55763894d3cdedb5751895f2d3f89d1b4"
 }

package/src/__tests__/index.spec.ts

@@ -0,0 +1,149 @@
+/* eslint-disable @typescript-eslint/ban-ts-ignore */
+import '@graphql-codegen/testing'
+
+import { Types } from '@graphql-codegen/plugin-helpers'
+import { buildSchema, parse, print, ASTNode } from 'graphql'
+import { plugin } from '..'
+
+const testSchema = buildSchema(/* GraphQL */ `
+  type Avatar {
+    id: ID!
+    url: String!
+  }
+
+  type User {
+    id: ID!
+    login: String!
+    avatar(height: Int!, width: Int!): Avatar
+  }
+
+  type Query {
+    user: User!
+    users: [User!]!
+  }
+`)
+
+// eslint-disable-next-line jest/expect-expect
+it('can be called', async () => {
+  const testDocument = parse(/* GraphQL */ `
+    query user {
+      user {
+        id
+      }
+    }
+  `)
+  await plugin(testSchema, [{ document: testDocument }], {})
+})
+
+// eslint-disable-next-line jest/expect-expect
+it('can be called with queries that include connection fragments', async () => {
+  const testDocument = parse(/* GraphQL */ `
+    query user {
+      users @connection(key: "foo") {
+        id
+      }
+    }
+  `)
+  await plugin(testSchema, [{ document: testDocument }], {})
+})
+
+it('can inline @argumentDefinitions/@arguments annotated fragments', async () => {
+  const fragmentDocument = parse(/* GraphQL */ `
+    fragment UserLogin on User
+    @argumentDefinitions(
+      height: { type: "Int", defaultValue: 10 }
+      width: { type: "Int", defaultValue: 10 }
+    ) {
+      id
+      login
+      avatar(width: $width, height: $height) {
+        id
+        url
+      }
+    }
+  `)
+  const queryDocument = parse(/* GraphQL */ `
+    query user {
+      users {
+        ...UserLogin @arguments(height: 30, width: 30)
+      }
+    }
+  `)
+  const input: Types.DocumentFile[] = [{ document: fragmentDocument }, { document: queryDocument }]
+  await plugin(testSchema, input, {})
+  const queryDoc = input.find((doc) => doc.document?.definitions[0].kind === 'OperationDefinition')
+
+  expect(queryDoc).toBeDefined()
+  expect(print(queryDoc?.document as ASTNode)).toBeSimilarStringTo(/* GraphQL */ `
+    query user {
+      users {
+        id
+        login
+        avatar(width: 30, height: 30) {
+          id
+          url
+        }
+      }
+    }
+  `)
+})
+
+it('handles unions with interfaces the correct way', async () => {
+  const schema = buildSchema(/* GraphQL */ `
+    type User {
+      id: ID!
+      login: String!
+    }
+
+    interface Error {
+      message: String!
+    }
+
+    type UserNotFoundError implements Error {
+      message: String!
+    }
+
+    type UserBlockedError implements Error {
+      message: String!
+    }
+
+    union UserResult = User | UserNotFoundError | UserBlockedError
+
+    type Query {
+      user: UserResult!
+    }
+  `)
+
+  const queryDocument = parse(/* GraphQL */ `
+    query user {
+      user {
+        ... on User {
+          id
+          login
+        }
+        ... on Error {
+          message
+        }
+      }
+    }
+  `)
+
+  const input: Types.DocumentFile[] = [{ document: queryDocument }]
+  await plugin(schema, input, {})
+  const queryDoc = input.find((doc) => doc.document?.definitions[0].kind === 'OperationDefinition')
+
+  expect(queryDoc).toBeDefined()
+  expect(print(queryDoc?.document as ASTNode)).toBeSimilarStringTo(/* GraphQL */ `
+    query user {
+      user {
+        ... on User {
+          id
+          login
+        }
+        ... on Error {
+          message
+        }
+      }
+    }
+  `)
+})

package/src/index.ts

@@ -0,0 +1,104 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+import { Types, PluginFunction } from '@graphql-codegen/plugin-helpers'
+import { GraphQLSchema, parse, printSchema, DefinitionNode, visit } from 'graphql'
+
+import { Parser as RelayParser } from 'relay-compiler'
+import CompilerContext from 'relay-compiler/lib/core/CompilerContext'
+import { print as relayPrint } from 'relay-compiler/lib/core/IRPrinter'
+import { create as relayCreate } from 'relay-compiler/lib/core/Schema'
+
+import { transform as applyFragmentArgumentTransform } from 'relay-compiler/lib/transforms/ApplyFragmentArgumentTransform'
+import { transformWithOptions as flattenTransformWithOptions } from 'relay-compiler/lib/transforms/FlattenTransform'
+import { transform as inlineFragmentsTransform } from 'relay-compiler/lib/transforms/InlineFragmentsTransform'
+import { transform as skipRedundantNodesTransform } from 'relay-compiler/lib/transforms/SkipRedundantNodesTransform'
+
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface RelayOptimizerPluginConfig {}
+
+function isFragment(documentFile: Types.DocumentFile) {
+  let name = false
+
+  visit(documentFile.document!, {
+    enter: {
+      FragmentDefinition: () => {
+        name = true
+      },
+    },
+  })
+  return name
+}
+
+export const plugin: PluginFunction<RelayOptimizerPluginConfig> = (
+  schema: GraphQLSchema,
+  documents: Types.DocumentFile[],
+  _config: RelayOptimizerPluginConfig,
+) => {
+  const isFrag = documents.every((d) => isFragment(d))
+
+  if (isFrag) return { content: '' }
+
+  // @TODO way for users to define directives they use, otherwise relay will throw an unknown directive error
+  // Maybe we can scan the queries and add them dynamically without users having to do some extra stuff
+  // transformASTSchema creates a new schema instance instead of mutating the old one
+  const adjustedSchema = relayCreate(printSchema(schema)).extend([
+    /* GraphQL */ `
+      directive @connection(key: String!, filter: [String!]) on FIELD
+      directive @client on FIELD
+    `,
+  ])
+
+  const documentAsts = documents.reduce(
+    (prev, v) => [...prev, ...(v.document?.definitions ?? [])],
+    [] as DefinitionNode[],
+  )
+
+  const relayDocuments = RelayParser.transform(adjustedSchema, documentAsts)
+
+  const fragmentCompilerContext = new CompilerContext(adjustedSchema).addAll(relayDocuments)
+
+  const fragmentDocuments = fragmentCompilerContext
+    .applyTransforms([
+      applyFragmentArgumentTransform,
+      flattenTransformWithOptions({ flattenAbstractTypes: false }),
+      skipRedundantNodesTransform,
+    ])
+    .documents()
+    .filter((doc) => doc.kind === 'Fragment')
+
+  const queryCompilerContext = new CompilerContext(adjustedSchema)
+    .addAll(relayDocuments)
+    .applyTransforms([
+      applyFragmentArgumentTransform,
+      inlineFragmentsTransform,
+      flattenTransformWithOptions({ flattenAbstractTypes: false }),
+      skipRedundantNodesTransform,
+    ])
+
+  const newQueryDocuments: Types.DocumentFile[] = queryCompilerContext.documents().map((doc) => ({
+    location: 'optimized by relay',
+    document: parse(relayPrint(adjustedSchema, doc)),
+  }))
+
+  let newDocuments: Types.DocumentFile[] = []
+  if (newQueryDocuments.length === 0) {
+    return { content: '' }
+  }
+  if (newQueryDocuments.length === 1) {
+    newDocuments = newQueryDocuments
+  } else {
+    newDocuments = [
+      ...fragmentDocuments.map((doc) => ({
+        location: 'optimized by relay',
+        document: parse(relayPrint(adjustedSchema, doc)),
+      })),
+      ...newQueryDocuments,
+    ]
+  }
+
+  documents.splice(0, documents.length)
+  documents.push(...newDocuments)
+
+  return {
+    content: '',
+  }
+}

package/src/tyes.d.ts

@@ -0,0 +1,12 @@
+declare module 'relay-compiler/lib/core/Schema' {
+  export function create(schema: string): import('relay-compiler').Schema
+}
+
+declare module 'relay-compiler/lib/core/IRPrinter' {
+  export function print(schema: import('relay-compiler').Schema, document: any): string
+}
+
+declare module 'relay-compiler/lib/core/CompilerContext' {
+  let CompilerContext: typeof import('relay-compiler').CompilerContext
+  export = CompilerContext
+}