如何导入.graphql文件用的WebPack

尝试导入此文件：如何导入.graphql文件用的WebPack

subscription onNewNotification { 
    notification { 
     id 
     content 
     seen 
    } 
}

运行巴贝尔节点时，编译整个事情我得到这个错误：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', 
      }, 
     ], 


    },

不知道为什么发生这种情况，我正在关注的阿波罗文档和我没有看到谷歌这事：http://dev.apollodata.com/react/webpack.html

来源

2017-05-21 Vlady Veselinov

我有同样的问题，你有没有找到解决办法？ –

你使用任何babel插件吗？ –

我应该使用一个特殊的babel插件吗？ – Coyolero

那么，我也有同样的问题。在与阿波罗闲暇频道上的人聊天后，我们开始调试并发现问题所在。我们发现问题是'babel-register'，它以某种方式试图编译.graphql文件，即使规则忽略。因此，有两条路可以走：

1. 做：而不是创建一个graphql文件，你可以只创建一个js文件来保存你的查询和创建它们使用GQL功能上react-apollo包并将其作为变量导出。
更多sofisticated：如果你使用的WebPack你可以创建一个配置，将编译所有的服务器代码在一个包，并使用节点上运行的软件包（没有通天节点或babel-register），就像它在GitHunt-React示例中一样（https://github.com/apollographql/GitHunt-React）。它不像第一个那么简单，但它更优雅。

来源

2017-06-08 19:56:56

如何导入.graphql文件用的WebPack

回答

相关问题