如何導入.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

回答

相關問題