Typescript error: Cannot find module 'query.gql'

[val-samonte]

I am using typescript 2.1.4 and using graphql-tag/loader for webpack. Unfortunately I am receiving this error whenever I compile from typescript.

[val-samonte]

Sorry, been able to find a solution by using "require" instead of "import", eg:
const query = require('gql/Query.gql');

Closing this issue.

[stubailo]

BTW look into typescript code generation with apollo-codegen: https://github.com/apollographql/apollo-codegen

[veeramarni]

Seems like import not working after latest update.

[viridia]

I'm having the same problem by the way; I'm using graphql-loader to load .graphql files, but I have to use require() instead of import in typescript source code.

[yordis]

The correct fix to this is to extend the Typescript definition, as such.

// webpack.d.ts
declare module "*.gql" {
  const content: any;
  export default content;
}

declare module "*.graphql" {
  const content: any;
  export default content;
}

The reason I use any value is because the function gql from the package returns any

graphql-tag/index.d.ts

Line 1 in 1fd2c9d

export default function gql(literals: any, ...placeholders: any[]): any;

But the correct typespec is the following one DocumentNode from graphql package.

declare module "*.gql" {
  import { DocumentNode } from "graphql";

  const content: DocumentNode;
  export default content;

}

declare module "*.graphql" {
  import { DocumentNode } from "graphql";

  const content: DocumentNode;
  export default content;
}

[dfee]

@yordis this doesn't seem to work for me. My understanding is that a *.d.ts file can be anywhere in my package -- so long as i don't explicitly declare files in my .tsconfig.json.

I'm still getting this error, though, despite a directory that looks like this:

/pkg
  /queries
    webpack.d.ts
    query1.gql
    query2.gql

[dfee]

❗️SOLVED❗️

Oh my god, I found the problem. @yordis's comment was almost right.

Here's the problem with his code (first three lines):

// webpack.d.ts
declare module "*.qql" {
  const content: any;

You're probably not seeing what's wrong here, so I'll make it explicit with capital letters:

declare module "*.QQL" {

This was either a grave typo, or in some world people name graphql files with the extension QQL.

Here's the working snippet:

// webpack.d.ts
declare module "*.qql" {
  const content: any;
  export default content;
}

declare module "*.graphql" {
  const content: any;
  export default content;
}

@yordis if you can update your comment, please do.

[yordis]

@dfee English 😢

I update the message and also improve the typespec.

[dfee]

I ended up using custom.d.ts as described here: https://webpack.js.org/guides/typescript/#importing-other-assets

I think this issue can be safely closed.

[EloB]

Anyone know how to add:

declare module "*.graphql" {
  const content: string; // string or DocumentNode doesn't really matter for me
  export default content;
}

Into a package inside a monorepo using like Turborepo, Lerna or Nx? That could be shared and published if I want to? Like the scoped packages from @types?

I know I can create a package called @types/custom-app but I'm wondering if it's possible to add without that name?

I would like it to be called same as my other scoped packages.

[yordis]

@EloB check this,

So a reusable package: https://github.com/straw-hat-team/types/blob/master/src/css-modules.ts

Then import it inside a .d.ts file that will be loaded.

For example, <root>/src/@tpes/index.d.ts

/// <reference types="@straw-hat/types/dist/css-modules" />
/// <reference types="@straw-hat/types/dist/svgr-webpack" />