Error compiling Typescript with graphql files

Question

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 .graphqlextension). It' based on the serverless framework, so to compile it I launch npm startwhich launches a cd src/app && tscin the command line.

The .tsfile references the .graphqlfile 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 tsccompilation, as it creates the output directory (../../built) but it is not copying the .graphqlfiles. 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 .graphqlfiles in .tsfiles, using something like this: GraphQL Code Generator

Any ideas out there? I'm stuck :S

Answer 1

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