use near-operation-file & typed-document-node to act like you are importing from .graphql

[tonypee]

If we use define a query in a .graphql file, then generate using near-operation-file/typed-document-node plugins, and the generated file can be a .ts 'next' to it. which contains the TypedDocumentNode:

src/MyQuery.graphql
src/MyQuery.graphql.ts <-- generated

Since the .ts is not observed when importing, this is valid:

import { MyQueryDocument } from './MyQuery.graphql' 

Conceivably node/webpack could ignore the .graphql file match, and match to the .graphql.ts - and it would look/feel just like you are reading out of the .graphql. This simplifies the need to match using overloading like with client-preset.

The only probem is.. it doesnt work. ie. webpack is complaining about a loader for the .graphql (since it actually exists). Has this approach been explored and proven to be not possible?

Thanks to @sasha-firsov-bs for the idea

[tonypee]

I figured it out, it works fine in vscode (following imports etc), but webpack needed to use the module replacement plugin:

 new NormalModuleReplacementPlugin(/\.graphql$/, function (resource) {
      resource.request = resource.request.replace(/\.graphql$/, '.graphql.ts');
    }),

So now it looks and feels like i am importing .graphql files, but infact its just directly linked to the graphql.ts - you jump straight into the ts types 🎉