benard-kong
benard-kong

Reputation: 2677

GraphQL: How to pass Query Variables via playground?

I am following Andrew Mead's tutorial on Gatsby and for some reason I am having trouble with passing query variables to the query via GraphQL playground. As far as I can tell, the query works on node, as the contents of the 'blog' are being populated.

Here is my code for the Query Variables (bottom left in GQL playground).

{
  "slug": "example"
}

And the query I am making:

query ($slug: String!) {
  markdownRemark (
    fields: {
      slug: {
        eq: $slug
      }
    }
  ) {
    frontmatter {
      title
      date
    }
    html
  }
}

However, this results in error: "message": "Variable \"$slug\" of required type \"String!\" was not provided.",

After playing around with making the variable required and not required, I am pretty sure it is because the query variable is not being passed, but I cannot figure out why as every other resource seems to do what Andrew Mead is doing. eg. Here

The strange thing is, the query seems to work when I run it on VS Code, but not on the playground. Is there a setting I am missing?

EDIT 2019-12-18: It was a dumb mistake of mine. I had clicked on HTTP HEADERS on the bottom left, NOT QUERY VARIABLES, as Daniel Reardon kindly pointed out.

Upvotes: 8

Views: 7674

Answers (1)

Daniel Rearden
Daniel Rearden

Reputation: 84857

Make sure you are entering the variables into the variable field and not the headers field. You can toggle between the two by clicking upon the appropriate tab above the field.

Upvotes: 9

Related Questions