如何使用webpack导入.graphql文件

Vla*_*nov 7 webpack graphql

试图导入此文件:

subscription onNewNotification {
    notification {
        id
        content
        seen
    }
}
Run Code Online (Sandbox Code Playgroud)

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


    },
Run Code Online (Sandbox Code Playgroud)

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

mat*_*a89 1

嗯,我也有同样的问题。在与 apollo slack 频道上的家伙交谈后,我们开始调试并发现问题所在。我们发现问题是“babel-register”以某种方式尝试编译文件,.graphql即使规则被忽略。所以有两条路可以走:

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