使用graphql文件编译Typescript时出错 [英] Error compiling Typescript with graphql files

问题描述

所以我是这个领域的新手，我正在尝试编译上面带有graphql文件(带有 .graphql 扩展名)的Typescript项目.它基于无服务器框架，因此为了进行编译，我启动了 npm start ，该启动了 cd src/app&&tsc 在命令行中.

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.

.ts 文件引用 .graphql 文件，如下所示:

The .tsfile references the .graphqlfile like this:

从'./schemaDefinition.graphql'导入SchemaDefinition；

错误是

data/schema/index.ts(2,30):错误TS2307:找不到模块'./schemaDefinition.graphql'.

data/schema/index.ts(2,30): error TS2307: Cannot find module './schemaDefinition.graphql'.

我认为这里的问题出在 tsc 编译中，因为它创建了输出目录(../../built)，但没有复制 .graphql 文件.这是我的 tsconfig.json 文件:

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"
    ]
}

我不确定是否需要做一些技巧来复制这些文件或使用预编译器步骤来使用以下命令将 .graphql 文件转换为 .ts 文件像这样的东西: GraphQL代码生成器

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

有什么想法吗?我被卡住了:S

Any ideas out there? I'm stuck :S

推荐答案

如果将Banckend打包在NodeJS中，则应在 webpack.config.js 文件和中对其进行配置> typings.d.ts 文件，因此编辑器和打包程序都知道这些文件.

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;
}

代码:

import * as query from query.graphql

要使其正常工作，可以为使用Webpack的人员使用诸如raw-loader之类的加载器.

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' },
  ]

此示例摘自 https://github.com/apollographql/graphql-tools/issues/273 ，其中有关于不同方法的积极讨论.

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

这是一个GitHub存储库，其功能大致相同，但具有更强大的解决方案: https://github.com/webpack-contrib/copy-webpack-plugin

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

另一方面，如果您要包装正面，则有一个方便的插件可以为您完成工作: https://www.npmjs.com/package/webpack-graphql-loader

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

这篇关于使用graphql文件编译Typescript时出错的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！