@graphql-tools/import does not play well with path alias

[juliovedovatto]

I work with a project Typescript + GraphQL and when I bumped package versions, we found out this strange issue. We use @graphql-codegen tools to generate our fragments and types. But when I upgraded @graphql-codegen/cli to latest version (1.15.0), we got several import errors.

After narrowing down, we had a guess that @graphql-tools/import is generating this issue. The previous version of @graphql-codegen/cli (1.14.0) was relying on @graphql-toolkit 0.10.x packages. While the latest version relies on @graphql-tools packages.

Overview:

I have several .graphql files with import instructions at top. so I can re-use fragments in another queries and keep DRY

Example:

#import '@api/fragments/media-photo.gql' // MediaPhotoFragment
#import '@api/fragments/channel.gql' // ChannelFragment

fragment CategoryFragment on Category {
 // ...
 channel {
    ...ChannelFragment
  }
  image {
    ...MediaPhotoFragment
  }
 // ...
}

I created @api alias to point to the folder that we save these fragments. To avoid using relative paths.

tsconfig.json

{
  "paths": {
      "@/*": [
        "src/*"
      ],
      "@api/*": [
        "src/api/*"
      ]
  }
}

Also in weback config file, we created a resolver to this alias.

module.exports = {
// ...
  chainWebpack: (config) => {
   // ...
    config.resolve.alias.set('@api', path.resolve(__dirname, 'src/api'))
   // ...
  },
   // ...
}

The error log:

  Error: Cannot find module '@api/fragments/media-photo.gql'
    Require stack:
    -  [ROOT_DIR]/src/api/fragments/noop.js
        at Function.Module._resolveFilename (internal/modules/cjs/loader.js:1020:15)
        at resolveFileName ( [ROOT_DIR]/node_modules/resolve-from/index.js:29:39)
        at resolveFrom ( [ROOT_DIR]/node_modules/resolve-from/index.js:43:9)
        at module.exports ( [ROOT_DIR]/node_modules/resolve-from/index.js:46:47)
        at resolveFilePath ( [ROOT_DIR]/node_modules/@graphql-tools/import/index.cjs.js:282:20)
        at visitFile ( [ROOT_DIR]/node_modules/@graphql-tools/import/index.cjs.js:44:20)
        at visitFile ( [ROOT_DIR]/node_modules/@graphql-tools/import/index.cjs.js:169:45)
        at Object.processImport ( [ROOT_DIR]/node_modules/@graphql-tools/import/index.cjs.js:30:
17)
        at GraphQLFileLoader.load ( [ROOT_DIR]/node_modules/@graphql-tools/graphql-file-loader/i
ndex.cjs.js:44:35)
        at async loadFile ( [ROOT_DIR]/node_modules/@graphql-tools/load/index.cjs.js:48:24)
        at async  [ROOT_DIR]/node_modules/@graphql-tools/load/index.cjs.js:425:24
    Error: Cannot find module '@api/fragments/media-photo.gql'
    Require stack:
    -  [ROOT_DIR]/src/api/fragments/noop.js
        at Function.Module._resolveFilename (internal/modules/cjs/loader.js:1020:15)
        at resolveFileName ( [ROOT_DIR]/node_modules/resolve-from/index.js:29:39)
        at resolveFrom ( [ROOT_DIR]/node_modules/resolve-from/index.js:43:9)
        at module.exports ( [ROOT_DIR]/node_modules/resolve-from/index.js:46:47)
        at resolveFilePath ( [ROOT_DIR]/node_modules/@graphql-tools/import/index.cjs.js:282:20)
        at visitFile ( [ROOT_DIR]/node_modules/@graphql-tools/import/index.cjs.js:44:20)
        at visitFile ( [ROOT_DIR]/node_modules/@graphql-tools/import/index.cjs.js:169:45)
        at Object.processImport ( [ROOT_DIR]/node_modules/@graphql-tools/import/index.cjs.js:30:
17)
        at GraphQLFileLoader.load ( [ROOT_DIR]/node_modules/@graphql-tools/graphql-file-loader/i
ndex.cjs.js:44:35)
        at async loadFile ( [ROOT_DIR]/node_modules/@graphql-tools/load/index.cjs.js:48:24)
        at async  [ROOT_DIR]/node_modules/@graphql-tools/load/index.cjs.js:425:24

My question is: Is there a way to support path aliases, like @graphql-toolkit does?

[ardatan]

We have never supported path aliases in graphql-import or graphql-toolkit and I don't think we are planning to do in the future. I'll take a look at the differences to find the problem. Thanks for opening the issue.

[juliovedovatto]

Thank you for the quick feedback @ardatan.

I will open an issue on @graphql-codegen repository.

[ardatan]

skipGraphQLImport option is missing so we need to bring it back on @graphql-tools/graphql-file-loader. That would solve the issue.

[juliovedovatto]

Was skipGraphQLImport default true in previous versions @ardatan ?

Because I never had to use this option before.

My codegen.yml

overwrite: true
schema: "https://${API_ENDPOINT}/api"
documents: "src/**/*.gql"
generates:
  src/api/generated/schema.json:
    plugins:
      - "introspection"
  src/api/generated/fragments.ts:
    plugins:
      - add: "/* tslint:disable */\n/* eslint-disable */"
      - "typescript"
      - "typescript-operations"
      - "fragment-matcher"

This works perfectly with @graphql-codegen/cli@1.14.0, which relies on @graphql-toolkit@0.10.x packages.

[ardatan]

No it is not. I need to take a look at the code to see the differences. I'll keep you posted.

[Tschoatscho]

I got a similar problem with missing types after replacing deprecated graphlql-import/import-schema with @graphql-tools/load/loadSchemaSync and GraphQLFileLoader as recommended in the migration guide.
To reproduce the errors I created a barebone repo here.
My initial assumption was that the reason might be within graphql-modules, so please try to ignore the misleading title.
Using @graphql-tools/loadFilesSync combined with @graphql-tools/merge seems to work as expected.

[DevelopmentByDavid]

Hi all,

I realize this is a really old thread, but I was having issues with this too and wanted to share how I solved it:

1. Install tsconfig-paths (Found via a suggestion in this SO answer.)
2. Run your project as instructed in the readme for tsconfig-paths
   • e.g. node -r tsconfig-paths/register main.js or ts-node -r tsconfig-paths/register main.ts or other means
3. Everything should work

Maybe this can be added to the documentation for the load files module? As a helpful hint/FAQ type of note.

Quick disclaimer: I've only been using it in development for about an hour now and have not found or noticed anything wrong (so far).

[ardatan]

@DevelopmentByDavid That's reasonable because it uses require.resolve under the hood which is patched by tsconfig-paths I suppose. So would you create a PR for the docs?

[DevelopmentByDavid]

@ardatan Sure thing. I forked the repo and will open a PR.

One quick question before I do though: Where would you like me to add the note? document-loading and schema-loading guides?

[ardatan]

@DevelopmentByDavid wherever you feel better? Maybe add one and add a link in another?

[ardatan]

Closing this issue for now. GraphQL Import uses require.resolve under the hood so tsconfig-paths can be used to extend this behavior and this has been documented thanks to @DevelopmentByDavid 's PR :) Thanks @DevelopmentByDavid !