Ignore raw .graphql files but still try to import files with extension .graphq.ts

[jgoux]

Hello all,

I'm using graphql-codegen in my project to generate TypeScript definition types from graphql operations.

I first write my operation as GraphQL SDL in a MyComponent.graphql file, and then graphql-codegen generates a MyComponent.graphql.ts file containing the types.

What I want now is to import those types without specifying the .ts extension : import { MyAwesomeType } from "./MyComponent.graphql".

The issue is that webpack is first attempting to resolve the actual .graphql file, so it tells me that I don't have a proper loader to load this file. I'd like webpack to totally ignore all my .graphql files and only consider the .graphql.ts files so I can import my types as specified above.

It it possible?

Thanks for your help!

[vankop]

Hi! Use resolve.extensions https://webpack.js.org/configuration/resolve/#resolveextensions

[jgoux]

Hello @vankop , this was my first attempt but it doesn't seem to change anything, the .graphql file is still attempted before webpack try any resolve.extensions.

I think I hit this case from the doc :

As webpack first check for the file existence, it takes the .graphql file in priority over the .graphql.ts file. I'd need a config to exclude specific files (all my .graphql files) from this check.

Edit : I just discovered the resolve.restrictions option and you were the one behind it! 2f7510a

Is it possible to pass a regex saying "anything but files ending with .graphql" ? I just tried passing an exhausting list like config.resolve.restrictions = [/\.(ejs|mjs|js|jsx|ts|tsx|json|cjs)$/]; but then folders aren't resolved (client/src doesn't match the restriction /\.(ejs|mjs|js|jsx|ts|tsx|json|cjs)$/)

[vankop]

Not sure, resolve.restrictions = [/^[^\.]+(\.graphql\.ts|\.js|\.ts)?$/] should work I think..

[jgoux]

I've found the right one based on negation! 🎊

resolve.restrictions = [/^(.(?!.*\.graphql$))+$/] is matching everything but strings ending with .graphql, problem solved!

Thanks for your help @vankop !