Argument of undefined passed to parser was not a valid GraphQL DocumentNode

See original GitHub issue

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?

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:9 (1 by maintainers)

github_iconTop GitHub Comments

13reactions
territorialcommented, Mar 18, 2021

i’ve replaced

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

with

import getStudents from'./../graphql/Queries.graphql'
6reactions
jeggycommented, Nov 20, 2018

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

passed to parser was not a valid GraphQL DocumentNode ...
You're calling the graphql function twice -- once in your definition of listMessages and createMessage and then again in your export ...
Read more >
Argument of undefined passed to parser was not a valid ...
I do import graphQL query as: import {getStudents} from'./../graphql/Queries.graphql'. Queries.graphql file:
Read more >
passed to parser was not a valid GraphQL DocumentNode ...
Coding example for the question passed to parser was not a valid GraphQL DocumentNode.you may need to use 'graphql-tag' or another method to...
Read more >
Compiling queries with Babel - Apollo GraphQL Docs
Using babel-plugin-import-graphql ... Now any import statements importing from a GraphQL file type will return a ready-to-use GraphQL DocumentNode object.
Read more >
graphql-tag - npm
A JavaScript template literal tag that parses GraphQL queries. ... It is the recommended method for passing queries to Apollo Client.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found