Resolve .graphql import in webpack and typescript

graphql.d.ts

declare module '*.graphql' {
  import { DocumentNode } from 'graphql';
  const MyQuery: DocumentNode;

  export { MyQuery };

  export default MyQuery;
}

index.ts

import { ApolloServer } from 'apollo-server'
import { resolvers } from './graphql/resolvers'
import { MyQuery } from './graphql/Query.graphql'

const server = new ApolloServer({
  typeDefs: MyQuery,
  resolvers,
})

server.listen().then(({ url }) => {
  console.log(`🚀  Server ready at ${url}`);
})

tsconfig.json

{
  "compilerOptions": {
    ...
    "typeRoots": ["node_modules/@types", "src/@types"],
  },
  "files": ["src/@types/graphql.d.ts"],
  "include": ["src/**/*"],
  "exclude": ["node_modules", "**/*.spec.ts"]
}

webpack.config.js

module.exports = {
  ...
  module: {
    ...
    rules: [
      ...
      {
        test: /\.graphql$/,
        exclude: /node_modules/,
        loader: 'graphql-tag/loader',
      },
    ]
}