我将graphQL查询导入为:
import {getStudents} from'./../graphql/Queries.graphql'
Queries.graphql 文件:
query getStudents($schoolID: Int!){
allStudents(schoolId: $schoolID){
pickUpLat
pickUpLng
}
}
但是当我尝试将查询传递给组件时:
export default graphql(getStudents, {
options: (props) => ({ variables: { schoolID: props.schoolID } })
})( StudentsMap );
我收到此错误:
Uncaught Error: Argument of undefined passed to parser was not a valid GraphQL DocumentNode. You may need to use 'graphql-tag' or another method to convert your operation into a document
at invariant (browser.js:38)
at parser (react-apollo.browser.umd.js:199)
at graphql (react-apollo.browser.umd.js:1061)
at Object../src/map/StudentsMap.js (StudentsMap.js:96)
at __webpack_require__ (bootstrap b06dc52180087582baaa:19)
at Object../src/App.js (App.css?9a66:26)
at __webpack_require__ (bootstrap b06dc52180087582baaa:19)
at Object../src/index.js (index.css?f255:26)
at __webpack_require__ (bootstrap b06dc52180087582baaa:19)
at Object.0 (registerServiceWorker.js:117)
但是,如果我在组件的同一文件中定义查询(不导入它)为:
const getStudents= gql`
query getStudents($schoolID: Int){
allStudents(schoolId: $schoolID){
pickUpLat
pickUpLng
}
}`
那么它确实可以正常工作,知道为什么在尝试导入查询时会出现该错误吗?
这是我的webpack.config.js
设置:(基于此参考)
var webpack = require('webpack');
module: {
rules: [
{
test: /\.(graphql|gql)$/,
exclude: /node_modules/,
loader: 'graphql-tag/loader',
},
],
}
似乎使用 Webpack 加载查询失败了?或者它可能是什么?