Question

我将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设置:(基于此reference）

var webpack = require('webpack');

   module: {
  rules: [
    {
      test: /\.(graphql|gql)$/,
      exclude: /node_modules/,
      loader: 'graphql-tag/loader',
    },
  ],
}

似乎使用Webpack加载查询失败了？或它可能是什么？

为什么我得到传递给解析器的未定义参数不是有效的GraphQL DocumentNode？

0 个答案: