GraphQL query with variable

I’ve been stuck on this for a while and cannot see what is wrong, any pointers most welcome.

In short I am trying to create some pages from some data returned from prismic. Following the guidelines in part four of the tutorial I have this in gatsby-node.js.

//create slugs
 exports.onCreateNode = ({ node, getNode, boundActionCreators }) => {

    const { createNodeField } = boundActionCreators
    if (node.internal.owner === 'gatsby-source-prismic' && node.type === `article`) {
      const slug = `${node.slugs[0]}`;
      console.log(`slug is: ${slug}`);
      createNodeField({
        node,
        name: `slug`,
        value: slug,
      })
    }
  }

And this

exports.createPages = ({ graphql, boundActionCreators }) => {
    const { createPage } = boundActionCreators

    return new Promise((resolve, reject) => {
      const articleTemplate = path.resolve(`src/templates/article.js`)

      // Query for article nodes to use in creating pages.
      resolve(
        graphql(
          `
               {
          articles: allPrismicDocument(filter: { type: { eq: "article" } }) {
            edges {
                node {
                  fields {
                       slug
                  }
                  type
                }
              }
          }
        }
      `
        ).then(result => {
          if (result.errors) {
            reject(result.errors)
          }

          // Create pages for each article.
          result.data.articles.edges.forEach(({ node }) => {
            console.log(`create page for ${node.fields.slug}`);
            createPage({
              path: node.fields.slug,
              component: articleTemplate,
              layout: `index`,
              context: {
                slug: node.fields.slug
              }
            })
          })
          resolve()
        })
      )
    })
  }

This works as expected. Now in my template I have this.

import React from "react";

export default ({ data }) => {

    debugger;
    console.log(data);

    return (
        <section>
        </section>
    )
}

export const query = graphql`
query ArticleQuery {
    allPrismicDocument(filter: { type: { eq: "article" } }) {
        edges {

            node {
                type
                fields {
                    slug
                }
                id
                data {
                    title {
                        text
                    }
                    content {
                        text
                    }
                    slideshow {
                        photo {
                            url
                        }
                    }
                }
            }
        }
    }
}
`

This also works (as in, data is defined) BUT this was just to prove the query works. Since here I have queried by type and will of course return all articles, and not just the one that matches the slug.

But now, if I update the query to filter by the slug…

export const query = graphql`
query ArticleQuery($slug: String!) {
    allPrismicDocument(fields: { slug: { eq: $slug } }) {
        edges {

            node {
                type
                fields {
                    slug
                }
                id
                data {
                    title {
                        text
                    }
                    content {
                        text
                    }
                    slideshow {
                        photo {
                            url
                        }
                    }
                }
            }
        }
    }
}
`

Then I get a build time GraphQL compilation error.

GraphQL Error There was an error while compiling your site’s GraphQL queries.

I cannot see what is wrong. I’ve tried several formats for the query and none compile. Also, the query is exactly the same as in the tutorial, which does work on my machine.

Any suggestions where to start looking? Oh and is this the best place to ask this kind of question?

[thebetterjort]

    query MyFilesQuery($slug: String!) {
        allFile(filter: {
          sourceInstanceName:{
            eq:$slug
          }
        }) {
            edges {
                node {
                    relativePath
                    prettySize
                    extension
                    birthTime(fromNow: true)
                }
            }
        }
    }   

This code works for me.

[pie6k]

I’ve switched to gatsby from next.js and start to regret it a bit. It’s like 6 hours now I’m fighting exactly this issue. I’m having query like

export const pageQuery = graphql`
  query TestQuery {
    works: allMarkdownRemark(filter: { fields: { contentType: { eq: "work" } } }) {
      edges {
        node {
          html
        }
      }
    }
  }
`;

and if I change even name of the query, my server crashes.