Error compiling Typescript with graphql files

graphql, node.js, serverless-framework, tsc, typescript

Solution

If you are packaging the banckend in NodeJS, it should be configured in the `webpack.config.js` file and in the `typings.d.ts` files, so both the editor and the packager knows about these files.

`typings.d.ts`:

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

code:

import * as query from query.graphql

For this to work, a loader such as raw-loader for those using Webpack will work.

module: {
  rules: [
    { test: /\.json$/, loader: 'json-loader' },
    { test: /\.html$/, loader: 'raw-loader' },
    { test: /\.graphql$/, loader: 'raw-loader' },
  ]

This sample has been taken from https://github.com/apollographql/graphql-tools/issues/273 where there's an active discussion about different approaches.

Here is a GitHub repo which does roughly the same but with a more powerful solution: https://github.com/webpack-contrib/copy-webpack-plugin

On the other hand, if you are packaging the front, there's a handy plugin to do the work for you: https://www.npmjs.com/package/webpack-graphql-loader

Problem

So I'm new in this area, the thing is that I'm trying to compile a Typescript project with graphql files on it (with `.graphql`extension). It' based on the serverless framework, so to compile it I launch `npm start`which launches a `cd src/app && tsc`in the command line. The `.ts`file references the `.graphql`file like this: `import SchemaDefinition from './schemaDefinition.graphql';` And the error is data/schema/index.ts(2,30): error TS2307: Cannot find module './schemaDefinition.graphql'. I think the issue here is in the `tsc`compilation, as it creates the output directory (../../built) but it is not copying the `.graphql`files. Here is my `tsconfig.json` file: ``` { "compilerOptions": { "declaration": false, "emitDecoratorMetadata": true, "experimentalDecorators": true, "target": "es5", "lib": ["dom", "es6"], "module": "commonjs", "allowJs": true, "moduleResolution": "node", "noImplicitAny": false, "removeComments": true, "preserveConstEnums": true, "rootDir": "./", "outDir": "../../built", "sourceMap": true, "pretty": true, "typeRoots": [ "node_modules/@types" ], "types": [ "@types/node", "@types/graphql" ], "allowSyntheticDefaultImports": true }, "include": [ "./*" ], "exclude": [ "node_modules" ] } ``` I'm not sure if I have to do some trick to copy these files or put a precompiler step to convert the `.graphql`files in `.ts`files, using something like this: GraphQL Code Generator Any ideas out there? I'm stuck :S

Original source