@graphcommerce/graphql-codegen-near-operation-file 2.102.3 → 2.103.3

package/package.json

@@ -1,18 +1,19 @@
 {
   "name": "@graphcommerce/graphql-codegen-near-operation-file",
-  "version": "2.102.3",
+  "version": "2.103.3",
   "sideEffects": false,
   "main": "dist/index.js",
   "engines": {
     "node": "14.x"
   },
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
   "scripts": {
     "dev": "tsc --preserveWatchOutput --watch --sourceMap --outDir dist",
     "build": "tsc --target es5 --outDir dist",
-    "prepare": "yarn build"
+    "prepack": "yarn build"
   },
   "prettier": "@graphcommerce/prettier-config-pwa",
   "browserslist": [
@@ -26,9 +27,9 @@
   },
   "devDependencies": {
     "@graphcommerce/browserslist-config-pwa": "^3.0.1",
-    "@graphcommerce/eslint-config-pwa": "^3.0.2",
+    "@graphcommerce/eslint-config-pwa": "^3.0.5",
     "@graphcommerce/prettier-config-pwa": "^3.0.2",
-    "@graphcommerce/typescript-config-pwa": "^3.0.1",
+    "@graphcommerce/typescript-config-pwa": "^3.1.0",
     "@playwright/test": "^1.15.0"
   },
   "dependencies": {
@@ -39,5 +40,5 @@
     "graphql": "^15.6.0",
     "parse-filepath": "^1.0.2"
   },
-  "gitHead": "aba0a6340e2d098313f1c25cc2047c18e5ea5db5"
+  "gitHead": "f1d0e488921787f39a260c410790ec13d32c8143"
 }

package/src/fragment-resolver.ts

@@ -0,0 +1,191 @@
+/* eslint-disable import/no-cycle */
+import { Types } from '@graphql-codegen/plugin-helpers'
+import {
+  BaseVisitor,
+  FragmentImport,
+  getConfigValue,
+  getPossibleTypes,
+  LoadedFragment,
+  ParsedConfig,
+  RawConfig,
+  ImportDeclaration,
+  buildScalarsFromConfig,
+} from '@graphql-codegen/visitor-plugin-common'
+import { DocumentNode, FragmentDefinitionNode, GraphQLSchema, Kind, print } from 'graphql'
+import { DocumentImportResolverOptions } from './resolve-document-imports'
+import { extractExternalFragmentsInUse } from './utils'
+
+export interface NearOperationFileParsedConfig extends ParsedConfig {
+  importTypesNamespace?: string
+  dedupeOperationSuffix: boolean
+  omitOperationSuffix: boolean
+  fragmentVariablePrefix: string
+  fragmentVariableSuffix: string
+}
+
+export type FragmentRegistry = {
+  [fragmentName: string]: {
+    filePath: string
+    onType: string
+    node: FragmentDefinitionNode
+    imports: Array<FragmentImport>
+  }
+}
+
+/**
+ * Used by `buildFragmentResolver` to build a mapping of fragmentNames to paths, importNames, and
+ * other useful info
+ */
+export function buildFragmentRegistry(
+  { generateFilePath }: DocumentImportResolverOptions,
+  { documents, config }: Types.PresetFnArgs<{}>,
+  schemaObject: GraphQLSchema,
+): FragmentRegistry {
+  const baseVisitor = new BaseVisitor<RawConfig, NearOperationFileParsedConfig>(config, {
+    scalars: buildScalarsFromConfig(schemaObject, config),
+    dedupeOperationSuffix: getConfigValue(config.dedupeOperationSuffix, false),
+    omitOperationSuffix: getConfigValue(config.omitOperationSuffix, false),
+    fragmentVariablePrefix: getConfigValue(config.fragmentVariablePrefix, ''),
+    fragmentVariableSuffix: getConfigValue(config.fragmentVariableSuffix, 'FragmentDoc'),
+  })
+
+  const getFragmentImports = (possbileTypes: string[], name: string): Array<FragmentImport> => {
+    const fragmentImports: Array<FragmentImport> = []
+
+    fragmentImports.push({ name: baseVisitor.getFragmentVariableName(name), kind: 'document' })
+
+    const fragmentSuffix = baseVisitor.getFragmentSuffix(name)
+    if (possbileTypes.length === 1) {
+      fragmentImports.push({
+        name: baseVisitor.convertName(name, {
+          useTypesPrefix: true,
+          suffix: fragmentSuffix,
+        }),
+        kind: 'type',
+      })
+    } else if (possbileTypes.length !== 0) {
+      possbileTypes.forEach((typeName) => {
+        fragmentImports.push({
+          name: baseVisitor.convertName(name, {
+            useTypesPrefix: true,
+            suffix: `_${typeName}_${fragmentSuffix}`,
+          }),
+          kind: 'type',
+        })
+      })
+    }
+
+    return fragmentImports
+  }
+
+  const duplicateFragmentNames: string[] = []
+  const registry = documents.reduce<FragmentRegistry>((prev: FragmentRegistry, documentRecord) => {
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    const fragments: FragmentDefinitionNode[] = documentRecord.document!.definitions.filter(
+      (d) => d.kind === Kind.FRAGMENT_DEFINITION,
+    ) as FragmentDefinitionNode[]
+
+    if (fragments.length > 0) {
+      for (const fragment of fragments) {
+        const schemaType = schemaObject.getType(fragment.typeCondition.name.value)
+
+        if (!schemaType) {
+          throw new Error(
+            `Fragment "${fragment.name.value}" is set on non-existing type "${fragment.typeCondition.name.value}"!`,
+          )
+        }
+
+        const possibleTypes = getPossibleTypes(schemaObject, schemaType)
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        const filePath = generateFilePath(documentRecord.location!)
+        const imports = getFragmentImports(
+          possibleTypes.map((t) => t.name),
+          fragment.name.value,
+        )
+
+        if (
+          prev[fragment.name.value] &&
+          print(fragment) !== print(prev[fragment.name.value].node)
+        ) {
+          duplicateFragmentNames.push(fragment.name.value)
+        }
+
+        prev[fragment.name.value] = {
+          filePath,
+          imports,
+          onType: fragment.typeCondition.name.value,
+          node: fragment,
+        }
+      }
+    }
+
+    return prev
+  }, {})
+
+  if (duplicateFragmentNames.length) {
+    throw new Error(
+      `Multiple fragments with the name(s) "${duplicateFragmentNames.join(', ')}" were found.`,
+    )
+  }
+
+  return registry
+}
+
+/** Builds a fragment "resolver" that collects `externalFragments` definitions and `fragmentImportStatements` */
+export default function buildFragmentResolver<T>(
+  collectorOptions: DocumentImportResolverOptions,
+  presetOptions: Types.PresetFnArgs<T>,
+  schemaObject: GraphQLSchema,
+) {
+  const fragmentRegistry = buildFragmentRegistry(collectorOptions, presetOptions, schemaObject)
+  const { baseOutputDir } = presetOptions
+  const { baseDir, typesImport } = collectorOptions
+
+  function resolveFragments(generatedFilePath: string, documentFileContent: DocumentNode) {
+    const fragmentsInUse = extractExternalFragmentsInUse(documentFileContent, fragmentRegistry)
+
+    const externalFragments: LoadedFragment<{ level: number }>[] = []
+    // fragment files to import names
+    const fragmentFileImports: { [fragmentFile: string]: Array<FragmentImport> } = {}
+    for (const fragmentName of Object.keys(fragmentsInUse)) {
+      const level = fragmentsInUse[fragmentName]
+      const fragmentDetails = fragmentRegistry[fragmentName]
+      if (fragmentDetails) {
+        // add top level references to the import object
+        // we don't checkf or global namespace because the calling config can do so
+        if (level === 0) {
+          if (fragmentFileImports[fragmentDetails.filePath] === undefined) {
+            fragmentFileImports[fragmentDetails.filePath] = fragmentDetails.imports
+          } else {
+            fragmentFileImports[fragmentDetails.filePath].push(...fragmentDetails.imports)
+          }
+        }
+
+        externalFragments.push({
+          level,
+          isExternal: true,
+          name: fragmentName,
+          onType: fragmentDetails.onType,
+          node: fragmentDetails.node,
+        })
+      }
+    }
+
+    return {
+      externalFragments,
+      fragmentImports: Object.entries(fragmentFileImports).map(
+        ([fragmentsFilePath, identifiers]): ImportDeclaration<FragmentImport> => ({
+          baseDir,
+          baseOutputDir,
+          outputPath: generatedFilePath,
+          importSource: {
+            path: fragmentsFilePath,
+            identifiers,
+          },
+          typesImport,
+        }),
+      ),
+    }
+  }
+  return resolveFragments
+}

package/src/index.ts

@@ -0,0 +1,266 @@
+import { join } from 'path'
+import addPlugin from '@graphql-codegen/add'
+import { Types, CodegenPlugin } from '@graphql-codegen/plugin-helpers'
+import {
+  FragmentImport,
+  ImportDeclaration,
+  ImportSource,
+} from '@graphql-codegen/visitor-plugin-common'
+import { FragmentDefinitionNode, buildASTSchema, visit } from 'graphql'
+import { injectInjectables } from './injectable'
+import { resolveDocumentImports, DocumentImportResolverOptions } from './resolve-document-imports'
+import { appendExtensionToFilePath, defineFilepathSubfolder } from './utils'
+
+export { resolveDocumentImports }
+export type { DocumentImportResolverOptions }
+
+export type FragmentImportFromFn = (
+  source: ImportSource<FragmentImport>,
+  sourceFilePath: string,
+) => ImportSource<FragmentImport>
+
+export type NearOperationFileConfig = {
+  /**
+   * Required, should point to the base schema types file. The key of the output is used a the base
+   * path for this file.
+   *
+   * If you wish to use an NPM package or a local workspace package, make sure to prefix the package
+   * name with `~`.
+   *
+   * @exampleMarkdown ```yml generates:
+   * src/:
+   *   preset: near-operation-file
+   *   presetConfig:
+   *     baseTypesPath: types.ts
+   *   plugins:
+   *     - typescript-operations
+   * ```
+   */
+  baseTypesPath: string
+  /**
+   * Overrides all external fragments import types by using a specific file path or a package name.
+   *
+   * If you wish to use an NPM package or a local workspace package, make sure to prefix the package
+   * name with `~`.
+   *
+   * @exampleMarkdown ```yml generates:
+   * src/:
+   *   preset: near-operation-file
+   *   presetConfig:
+   *     baseTypesPath: types.ts
+   *     importAllFragmentsFrom: '~types'
+   *   plugins:
+   *     - typescript-operations
+   * ```
+   */
+  importAllFragmentsFrom?: string | FragmentImportFromFn
+  /**
+   * Optional, sets the extension for the generated files. Use this to override the extension if you
+   * are using plugins that requires a different type of extensions (such as `typescript-react-apollo`)
+   *
+   * @default .generates.ts
+   * @exampleMarkdown ```yml generates:
+   * src/:
+   *   preset: near-operation-file
+   *   presetConfig:
+   *     baseTypesPath: types.ts
+   *     extension: .generated.tsx
+   *   plugins:
+   *     - typescript-operations
+   *     - typescript-react-apollo
+   * ```
+   */
+  extension?: string
+  /**
+   * Optional, override the `cwd` of the execution. We are using `cwd` to figure out the imports
+   * between files. Use this if your execuion path is not your project root directory.
+   *
+   * @default process.cwd()
+   * @exampleMarkdown ```yml generates:
+   * src/:
+   *   preset: near-operation-file
+   *   presetConfig:
+   *     baseTypesPath: types.ts
+   *     cwd: /some/path
+   *   plugins:
+   *     - typescript-operations
+   * ```
+   */
+  cwd?: string
+  /**
+   * Optional, defines a folder, (Relative to the source files) where the generated files will be created.
+   *
+   * @default ''
+   * @exampleMarkdown ```yml generates:
+   * src/:
+   *   preset: near-operation-file
+   *   presetConfig:
+   *     baseTypesPath: types.ts
+   *     folder: __generated__
+   *   plugins:
+   *     - typescript-operations
+   * ```
+   */
+  folder?: string
+  /**
+   * Optional, override the name of the import namespace used to import from the `baseTypesPath` file.
+   *
+   * @default Types
+   * @exampleMarkdown ```yml generates:
+   * src/:
+   *   preset: near-operation-file
+   *   presetConfig:
+   *     baseTypesPath: types.ts
+   *     importTypesNamespace: SchemaTypes
+   *   plugins:
+   *     - typescript-operations
+   * ```
+   */
+  importTypesNamespace?: string
+
+  /**
+   * Enable the injectables
+   *
+   * ```yml
+   * src/:
+   *   preset: near-operation-file
+   *   presetConfig:
+   *     baseTypesPath: types.ts
+   *     injectables: true
+   *   plugins:
+   *     - typescript-operations
+   * ```
+   */
+  injectables?: boolean
+}
+
+export type FragmentNameToFile = {
+  [fragmentName: string]: {
+    location: string
+    importsNames: string[]
+    onType: string
+    node: FragmentDefinitionNode
+  }
+}
+
+function isFragment(documentFile: Types.DocumentFile) {
+  let name = false
+
+  visit(documentFile.document!, {
+    enter: {
+      FragmentDefinition: () => {
+        name = true
+      },
+    },
+  })
+  return name
+}
+
+function isDocument(documentFiles: Types.DocumentFile[]) {
+  return !documentFiles.every(isFragment)
+}
+
+export const preset: Types.OutputPreset<NearOperationFileConfig> = {
+  buildGeneratesSection: (options) => {
+    if (options.presetConfig.injectables) {
+      options.documents = injectInjectables(options.documents)
+    }
+
+    const schemaObject = options.schemaAst ?? buildASTSchema(options.schema, options.config)
+
+    const baseDir = options.presetConfig.cwd ?? process.cwd()
+    const extension = options.presetConfig.extension ?? '.generated.ts'
+    const folder = options.presetConfig.folder ?? ''
+    const importTypesNamespace = options.presetConfig.importTypesNamespace ?? 'Types'
+    const { importAllFragmentsFrom } = options.presetConfig
+
+    const { baseTypesPath } = options.presetConfig
+
+    if (!baseTypesPath) {
+      throw new Error(
+        `Preset "near-operation-file" requires you to specify "baseTypesPath" configuration and point it to your base types file (generated by "typescript" plugin)!`,
+      )
+    }
+
+    const shouldAbsolute = !baseTypesPath.startsWith('~')
+
+    const pluginMap: { [name: string]: CodegenPlugin } = {
+      ...options.pluginMap,
+      add: addPlugin,
+    }
+
+    const sources = resolveDocumentImports(options, schemaObject, {
+      baseDir,
+      generateFilePath(location: string) {
+        const newFilePath = defineFilepathSubfolder(location, folder)
+
+        return appendExtensionToFilePath(newFilePath, extension)
+      },
+      schemaTypesSource: {
+        path: shouldAbsolute ? join(options.baseOutputDir, baseTypesPath) : baseTypesPath,
+        namespace: importTypesNamespace,
+      },
+      typesImport: options.config.useTypeImports ?? false,
+    })
+
+    return sources.map<Types.GenerateOptions>(
+      ({ importStatements, externalFragments, fragmentImports, documents, ...source }) => {
+        let fragmentImportsArr = fragmentImports
+
+        if (importAllFragmentsFrom) {
+          fragmentImportsArr = fragmentImports.map<ImportDeclaration<FragmentImport>>((t) => {
+            const newImportSource: ImportSource<FragmentImport> =
+              typeof importAllFragmentsFrom === 'string'
+                ? { ...t.importSource, path: importAllFragmentsFrom }
+                : importAllFragmentsFrom(t.importSource, source.filename)
+
+            return {
+              ...t,
+              importSource: newImportSource || t.importSource,
+            }
+          })
+        }
+
+        const isDoc = isDocument(documents)
+        const isRelayOptimizer = !!Object.keys(pluginMap).find((plugin) =>
+          plugin.includes('relay-optimizer-plugin'),
+        )
+
+        const plugins = [
+          // TODO/NOTE I made globalNamespace include schema types - is that correct?
+          ...(options.config.globalNamespace
+            ? []
+            : importStatements.map((importStatement) => ({ add: { content: importStatement } }))),
+          ...options.plugins.filter(
+            (pluginOptions) =>
+              !isRelayOptimizer ||
+              isDoc ||
+              !Object.keys(pluginOptions).includes('typed-document-node'),
+          ),
+        ]
+        const config = {
+          ...options.config,
+          // This is set here in order to make sure the fragment spreads sub types
+          // are exported from operations file
+          exportFragmentSpreadSubTypes: true,
+          namespacedImportName: importTypesNamespace,
+          externalFragments,
+          fragmentImports: fragmentImportsArr,
+        }
+
+        return {
+          ...source,
+          documents,
+          plugins,
+          pluginMap,
+          config,
+          schema: options.schema,
+          schemaAst: schemaObject,
+          skipDocumentsValidation: true,
+        }
+      },
+    )
+  },
+}
+
+export default preset

package/src/injectable.graphqls

@@ -0,0 +1,21 @@
+"""
+Defines wheter a Fragment can be injected
+
+```graphql
+fragment MyInjectableFragment on Model @injectable {
+  id
+}
+```
+"""
+directive @injectable on FRAGMENT_DEFINITION
+
+"""
+Defines whether a Fragment injects into an @injectable
+
+```graphql
+fragment MyFragment on Model @inject(into ["MyInjectableFragment"]) {
+  field
+}
+```
+"""
+directive @inject(into: [String!]!) on FRAGMENT_DEFINITION

package/src/injectable.ts

@@ -0,0 +1,126 @@
+/* eslint-disable react/destructuring-assignment */
+import { Types } from '@graphql-codegen/plugin-helpers'
+import { visit, DocumentNode, FragmentSpreadNode, FragmentDefinitionNode } from 'graphql'
+
+function isFragment(document: DocumentNode) {
+  let is = false
+  visit(document, {
+    FragmentDefinition: () => {
+      is = true
+    },
+  })
+  return is
+}
+
+function hasInjectableDirective(document: DocumentNode) {
+  let is = false
+  visit(document, {
+    Directive: (node) => {
+      if (!is && node.name.value === 'injectable') is = true
+    },
+  })
+  return is && isFragment
+}
+
+function hasInjectDirective(document: DocumentNode) {
+  let is = false
+  visit(document, {
+    Directive: (node) => {
+      if (!is && node.name.value === 'inject') is = true
+    },
+  })
+  return is && isFragment
+}
+
+type Inject = { into: string[]; fragment: FragmentDefinitionNode }
+
+function throwInjectError(conf: Partial<Inject>, message: string) {
+  const val = conf.into?.map((v) => `"${v}"`)
+
+  throw Error(
+    `${message}
+  fragment ${conf.fragment?.name.value} on ${conf.fragment?.typeCondition.name.value} @inject(into: [${val}]) { ... }`,
+  )
+}
+
+function assertValidInject(injectVal: Partial<Inject>): asserts injectVal is Inject {
+  const { into, fragment } = injectVal
+  if (!fragment || into?.length === 0) throwInjectError(injectVal, 'Invalid inject')
+}
+
+function getInjectConf(document: DocumentNode): Inject {
+  if (!hasInjectDirective(document)) throw Error('')
+
+  const conf: Partial<Inject> = { into: [] }
+  visit(document, {
+    Directive: (node) => {
+      if (node.name.value !== 'inject') return false
+      visit(node, {
+        Argument: (arg) => {
+          if (arg.name.value !== 'into') return false
+          visit(arg, {
+            ListValue: (list) => {
+              list.values.forEach((value) => {
+                visit(value, {
+                  StringValue: (string) => {
+                    conf.into?.push(string.value)
+                  },
+                })
+              })
+            },
+          })
+          return undefined
+        },
+      })
+      return null
+    },
+    FragmentDefinition: (node) => {
+      conf.fragment = node
+    },
+  })
+  assertValidInject(conf)
+  return conf
+}
+
+function injectInjectable(injectables: DocumentNode[], injector: DocumentNode) {
+  const injectVal = getInjectConf(injector)
+  const { into, fragment } = injectVal
+
+  into.forEach((target) => {
+    let found = false
+    injectables.forEach((injectable) => {
+      visit(injectable, {
+        FragmentDefinition: (frag) => {
+          if (frag.name.value === target) {
+            found = true
+
+            const spread: FragmentSpreadNode = {
+              kind: 'FragmentSpread',
+              name: { kind: 'Name', value: fragment.name.value },
+            }
+            frag.selectionSet.selections = [...frag.selectionSet.selections, spread]
+          }
+        },
+      })
+    })
+    if (!found)
+      throwInjectError(
+        injectVal,
+        `fragment ${target} @injectable { ... } can not be found or isn't injectable`,
+      )
+  })
+}
+
+export function injectInjectables(documentFiles: Types.DocumentFile[]) {
+  const documents = documentFiles
+    .map(({ document }) => document)
+    .filter((doc) => doc) as DocumentNode[]
+
+  const injectables = documents.filter((d) => isFragment(d) && hasInjectableDirective(d))
+
+  const injectors = documents.filter((d) => isFragment(d) && hasInjectDirective(d))
+
+  injectors.forEach((d) => injectInjectable(injectables, d))
+
+  return documentFiles
+}

package/src/resolve-document-imports.ts

@@ -0,0 +1,173 @@
+/* eslint-disable import/no-cycle */
+import { resolve } from 'path'
+import { isUsingTypes, Types, DetailedError } from '@graphql-codegen/plugin-helpers'
+import {
+  generateImportStatement,
+  ImportSource,
+  resolveImportSource,
+  FragmentImport,
+  ImportDeclaration,
+  LoadedFragment,
+} from '@graphql-codegen/visitor-plugin-common'
+import { Source } from '@graphql-tools/utils'
+import { FragmentDefinitionNode, GraphQLSchema, visit } from 'graphql'
+import buildFragmentResolver, { buildFragmentRegistry } from './fragment-resolver'
+import { extractExternalFragmentsInUse } from './utils'
+
+export type FragmentRegistry = {
+  [fragmentName: string]: {
+    location: string
+    importNames: string[]
+    onType: string
+    node: FragmentDefinitionNode
+  }
+}
+
+export type DocumentImportResolverOptions = {
+  baseDir: string
+  /** Generates a target file path from the source `document.location` */
+  generateFilePath: (location: string) => string
+  /** Schema base types source */
+  schemaTypesSource: string | ImportSource
+  /** Should `import type` be used */
+  typesImport: boolean
+}
+
+interface ResolveDocumentImportResult {
+  filename: string
+  documents: Source[]
+  importStatements: string[]
+  fragmentImports: ImportDeclaration<FragmentImport>[]
+  externalFragments: LoadedFragment<{
+    level: number
+  }>[]
+}
+
+function getFragmentName(documentFile: Types.DocumentFile) {
+  let name: string | undefined
+  visit(documentFile.document!, {
+    enter: {
+      FragmentDefinition: (node: FragmentDefinitionNode) => {
+        name = node.name.value
+      },
+    },
+  })
+  return name
+}
+
+/**
+ * Transform the preset's provided documents into single-file generator sources, while resolving
+ * fragment and user-defined imports
+ *
+ * Resolves user provided imports and fragment imports using the `DocumentImportResolverOptions`.
+ * Does not define specific plugins, but rather returns a string[] of `importStatements` for the
+ * calling plugin to make use of
+ */
+export function resolveDocumentImports<T>(
+  presetOptions: Types.PresetFnArgs<T>,
+  schemaObject: GraphQLSchema,
+  importResolverOptions: DocumentImportResolverOptions,
+): Array<ResolveDocumentImportResult> {
+  const { baseOutputDir, documents, pluginMap } = presetOptions
+  const { generateFilePath, schemaTypesSource, baseDir, typesImport } = importResolverOptions
+
+  const resolveFragments = buildFragmentResolver(importResolverOptions, presetOptions, schemaObject)
+  const fragmentRegistry = buildFragmentRegistry(importResolverOptions, presetOptions, schemaObject)
+
+  const isRelayOptimizer = !!Object.keys(pluginMap).find((plugin) =>
+    plugin.includes('relay-optimizer-plugin'),
+  )
+
+  const resDocuments = documents.map((documentFile) => {
+    try {
+      const isFragment = typeof getFragmentName(documentFile) !== 'undefined'
+
+      if (!isFragment && isRelayOptimizer) {
+        const generatedFilePath = generateFilePath(documentFile.location!)
+
+        let externalFragments = extractExternalFragmentsInUse(
+          documentFile.document!,
+          fragmentRegistry,
+        )
+        // Sort the entries in the right order so fragments are defined when using
+        externalFragments = Object.fromEntries(
+          Object.entries(externalFragments).sort(([, levelA], [, levelB]) => levelB - levelA),
+        )
+
+        const fragments = documents.filter(
+          (d) => typeof externalFragments[getFragmentName(d) ?? ''] !== 'undefined',
+        )
+
+        const importStatements: string[] = []
+
+        if (isUsingTypes(documentFile.document!, [], schemaObject)) {
+          const schemaTypesImportStatement = generateImportStatement({
+            baseDir,
+            importSource: resolveImportSource(schemaTypesSource),
+            baseOutputDir,
+            outputPath: generatedFilePath,
+            typesImport,
+          })
+          importStatements.unshift(schemaTypesImportStatement)
+        }
+
+        // const newDocument = [...fragments.map((f) => f.rawSDL), documentFile.rawSDL].join('\n')
+
+        return {
+          filename: generatedFilePath,
+          documents: [...fragments, documentFile],
+          importStatements,
+          fragmentImports: [],
+          externalFragments: [],
+        } as ResolveDocumentImportResult
+      }
+
+      const generatedFilePath = generateFilePath(documentFile.location!)
+      const importStatements: string[] = []
+      const { externalFragments, fragmentImports } = resolveFragments(
+        generatedFilePath,
+        documentFile.document!,
+      )
+
+      if (
+        isRelayOptimizer ||
+        isUsingTypes(
+          documentFile.document!,
+          externalFragments.map((m) => m.name),
+          schemaObject,
+        )
+      ) {
+        const schemaTypesImportStatement = generateImportStatement({
+          baseDir,
+          importSource: resolveImportSource(schemaTypesSource),
+          baseOutputDir,
+          outputPath: generatedFilePath,
+          typesImport,
+        })
+        importStatements.unshift(schemaTypesImportStatement)
+      }
+
+      return {
+        filename: generatedFilePath,
+        documents: [documentFile],
+        importStatements,
+        fragmentImports,
+        externalFragments,
+      }
+    } catch (e) {
+      if (e instanceof Error) {
+        throw new DetailedError(
+          `Unable to validate GraphQL document!`,
+          `File ${documentFile.location} caused error: ${e.message || e.toString()}`,
+          documentFile.location,
+        )
+      } else {
+        throw e
+      }
+    }
+  })
+
+  return resDocuments.filter((result) =>
+    result.filename.startsWith(resolve(baseDir, baseOutputDir)),
+  )
+}

package/src/test/InjectableFragment.graphql

@@ -0,0 +1,3 @@
+fragment InjectableFragment on StoreConfig @injectable {
+  store_code
+}

package/src/test/InjectingFragment.graphql

@@ -0,0 +1,3 @@
+fragment InjectingFragment on StoreConfig @inject(into: ["InjectableFragment"]) {
+  base_url
+}

package/src/test/QueryWithInjectable.graphql

@@ -0,0 +1,5 @@
+query QueryWitInjectable {
+  storeConfig {
+    ...InjectableFragment
+  }
+}

package/src/utils.ts

@@ -0,0 +1,61 @@
+/* eslint-disable import/no-cycle */
+import { join } from 'path'
+import { DocumentNode, visit, FragmentSpreadNode, FragmentDefinitionNode } from 'graphql'
+import parsePath from 'parse-filepath'
+import { FragmentRegistry } from './fragment-resolver'
+
+export function defineFilepathSubfolder(baseFilePath: string, folder: string) {
+  const parsedPath = parsePath(baseFilePath)
+  return join(parsedPath.dir, folder, parsedPath.base).replace(/\\/g, '/')
+}
+
+export function appendExtensionToFilePath(baseFilePath: string, extension: string) {
+  const parsedPath = parsePath(baseFilePath)
+
+  return join(parsedPath.dir, parsedPath.name + extension).replace(/\\/g, '/')
+}
+
+export function extractExternalFragmentsInUse(
+  documentNode: DocumentNode | FragmentDefinitionNode,
+  fragmentNameToFile: FragmentRegistry,
+  result: { [fragmentName: string]: number } = {},
+  level = 0,
+): { [fragmentName: string]: number } {
+  const ignoreList: Set<string> = new Set()
+
+  // First, take all fragments definition from the current file, and mark them as ignored
+  visit(documentNode, {
+    enter: {
+      FragmentDefinition: (node: FragmentDefinitionNode) => {
+        ignoreList.add(node.name.value)
+      },
+    },
+  })
+
+  // Then, look for all used fragments in this document
+  visit(documentNode, {
+    enter: {
+      FragmentSpread: (node: FragmentSpreadNode) => {
+        if (!ignoreList.has(node.name.value)) {
+          if (
+            result[node.name.value] === undefined ||
+            (result[node.name.value] !== undefined && level < result[node.name.value])
+          ) {
+            result[node.name.value] = level
+
+            if (fragmentNameToFile[node.name.value]) {
+              extractExternalFragmentsInUse(
+                fragmentNameToFile[node.name.value].node,
+                fragmentNameToFile,
+                result,
+                level + 1,
+              )
+            }
+          }
+        }
+      },
+    },
+  })
+
+  return result
+}