CODEWITHSUNDEEP
node.jstypescriptgraphqltscserverless-framework
Carlos Delgado
Carlos Delgado

Reputation: 562

Error compiling Typescript with graphql files

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

Upvotes: 8

Views: 9262

Answers (3)

Johann C
Johann C

Reputation: 17

Another workaround is to copy .graphql file to the output folder through automated script for example https://www.npmjs.com/package/copy

Upvotes: -2

Carlos Delgado
Carlos Delgado

Reputation: 562

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

Upvotes: 6

Steve Lee
Steve Lee

Reputation: 6101

Assuming the graphql files have a JS extension so are processed if they do not export anything or nothing imports them you could try the not recommended

import "./my-module.js";

Upvotes: 0

Related Questions