问题描述
所以我是这个领域的新手,问题是我正在尝试编译一个带有 graphql 文件的 Typescript 项目(带有 .graphql
扩展名).它基于无服务器框架,所以为了编译它,我启动 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 .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.
.ts
文件像这样引用 .graphql
文件:
The .ts
file references the .graphql
file like this:
import SchemaDefinition from './schemaDefinition.graphql';
错误是
data/schema/index.ts(2,30):错误 TS2307:找不到模块./schemaDefinition.graphql".
我认为这里的问题出在 tsc
编译中,因为它创建了输出目录 (../../built) 但它没有复制 .graphql
文件.这是我的 tsconfig.json
文件:
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"
]
}
我不确定我是否需要做一些技巧来复制这些文件或放置一个预编译器步骤来转换 .ts
文件中的 .graphql
文件,使用像这样:GraphQL 代码生成器
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
有什么想法吗?我被卡住了:S
Any ideas out there? I'm stuck :S
推荐答案
如果你在 NodeJS 中打包了 banckend,应该在 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-工具/问题/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 时出错的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!