Question

尝试导入此文件：

subscription onNewNotification {
    notification {
        id
        content
        seen
    }
}

运行babel-node编译整个事件时出现此错误：SyntaxError: .../graphql/NotificationSubscription.graphql: Unexpected token, expected ;

这就是我的webpack加载器的样子：

module: {
        loaders: [
            {
                test: /\.js?$/,
                include: [
                    path.join(__dirname, 'client'),
                    path.join(__dirname, 'server/shared'),
                ],
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                    presets: ['react-hmre'],
                },
            },
            {
                test: /\.json?$/,
                loader: 'json-loader',
            },
            {
                test: /\.scss$/,
                loaders: ['style-loader', 'css-loader', 'sass-loader'],
            },
            { test: /\.css$/, loader: 'style-loader!css-loader' },

            { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'file-loader?mimetype=image/svg+xml' },
            {
                test: /\.(graphql|gql)$/,
                exclude: /node_modules/,
                loader: 'graphql-tag/loader',
            },
        ],


    },

不知道为什么会发生这种情况，我正在关注Apollo文档，我在谷歌上看不到任何相关内容：http://dev.apollodata.com/react/webpack.html

Answer 1

嗯，我也有同样的问题。在与apollo slack频道上的人谈话后，我们开始调试并发现问题所在。我们发现问题是'babel-register'以某种方式尝试编译.graphql文件，即使有规则要忽略。所以你可以走两条路：

1. 更容易做到：您可以创建一个js文件来保存查询，并使用react-apollo包上的gql函数创建它们，并将其导出为变量，而不是创建graphql文件。
1. 更加软化：如果你使用webpack你可以创建一个配置，它将在一个包中编译你的所有服务器代码，并使用节点（没有babel-node或babel-register）运行bundle，就像在GitHunt-React示例中那样（https://github.com/apollographql/GitHunt-React）。它不像第一个那么简单，但它更优雅。

Answer 2

我已用inline-import-graphql-ast

解决了这个问题

如何使用webpack导入.graphql文件

2 个答案: