Graphql-tag: Argument of undefined passed to parser was not a valid GraphQL DocumentNode

[hopewise]

I do import graphQL query as:

import {getStudents} from'./../graphql/Queries.graphql'

Queries.graphql file:

query getStudents($schoolID: Int!){
  allStudents(schoolId: $schoolID){
    pickUpLat
    pickUpLng
  }
}

but when I try to pass the query to the component as:

export default graphql(getStudents, {
  options: (props) => ({ variables: { schoolID: props.schoolID } })
})( StudentsMap );

I get this error:

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)

However, if I define the query in the same file of component (not importing it) as:

const getStudents= gql`
query getStudents($schoolID: Int){
  allStudents(schoolId: $schoolID){
    pickUpLat
    pickUpLng
  }
}`

then it does work normally, any idea why I get that error when try to import the query?

Here is my webpack.config.js settings: (based on this reference)

var webpack = require('webpack');

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

It seems that Loading queries with Webpack fails? or what it could be?

[jnwng]

There’s a version of graphql-tag that does not export a single query with a
name - can you try the default import (instead of the named import) from
the .graphql file to see if that changes anything?
On Tue, May 22, 2018 at 12:55 AM Samir Sabri [e-mail]
wrote:

I do import graphQL query as:

import {getStudents} from'./../graphql/Queries.graphql'

Queries.graphql file:

query getStudents($schoolID: Int!){
allStudents(schoolId: $schoolID){
pickUpLat
pickUpLng
}
}

but when I try to pass the query to the component as:

export default graphql(getStudents, {
options: (props) => ({ variables: { schoolID: props.schoolID } })
})( StudentsMap );

I get this error:

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)

However, if I define the query in the same file of component (not
importing it) as:

const getStudents= gql query getStudents($schoolID: Int){ allStudents(schoolId: $schoolID){ pickUpLat pickUpLng } }

then it does work normally, any idea why I get that error when try to
import the query?

Here is my webpack.config.js settings: (based on this reference
https://www.apollographql.com/docs/react/recipes/webpack.html)

var webpack = require('webpack');

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

It seems that Loading queries with Webpack fails? or what it could be?

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/apollographql/graphql-tag/issues/185, or mute the
thread
https://github.com/notifications/unsubscribe-auth/ABERRujVEg3A7MazYX_-crSJ28v4Gntcks5t08RsgaJpZM4UIJVj
.

[hopewise]

do you mean to store the query into a js file rather than graphql ? can you please write an example here?

[hopewise]

I found the solution to my problem, I found that the graphql-tag loader was not working as I was using other library to start

[jeggy]

What do you mean you used other library to start? I think I have the same issue you have

[Harshmakadia]

@hopewise Facing the same issue. what is the proper solution to resolve this??

[jeggy]

I was working in an ejected CRA app and I fixed it by adding

{
    test: /\.(graphql|gql)$/,
    loader: require.resolve('graphql-tag/loader'),
},

to my webpack.config.dev and prod files within the oneOf rules

[Harshmakadia]

What is the solution for un ejected CRA @jeggy ? Any idea on how to fix this?

[jeshio]

What is the solution for un ejected CRA @jeggy ? Any idea on how to fix this?

https://facebook.github.io/create-react-app/docs/loading-graphql-files