Gatsby: StaticQuery doesn't support graphql arguments

[alexkirsz]

Description

It appears that StaticQuery doesn't recognize the graphql(query..., { ...args }) form when passed in as its query prop.

In my case, this form is useful because I need to execute multiple static queries of the same form with slightly different arguments at compile-time, and inlining them into my query would be extremely repetitive. These arguments do not change at runtime.

Steps to reproduce

export default function () => (
  <StaticQuery
    query={graphql(`
        query Query($limit: Int!) {
          allSitePage(limit: $limit) {
            edges {
              node {
                id
              }
            }
          }
        }
    `, { limit: 3 })}
    render={data => (
      <div>{data.allSitePage.edges[0].node.id}</div>
    )}
  />
);

Expected result

The query should resolve at compile time.

Actual result

Gatsby throws the following error:

Uncaught (in promise) Error: It appears like Gatsby is misconfigured. Gatsby related `graphql` calls are supposed to only be evaluated at compile time, and then compiled away,. Unfortunately, something went wrong and the query was left in the compiled code.

.Unless your site has a complex or custom babel/Gatsby configuration this is likely a bug in Gatsby.

Environment

  System:
    OS: macOS High Sierra 10.13.6
    CPU: x64 Intel(R) Core(TM) i7-7567U CPU @ 3.50GHz
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 10.9.0 - /usr/local/Cellar/node/10.9.0/bin/node
    Yarn: 1.9.4 - /usr/local/bin/yarn
    npm: 6.2.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 68.0.3440.106
    Firefox: 61.0.1
    Safari: 11.1.2
  npmPackages:
    gatsby: next => 2.0.0-beta.61 
    gatsby-image: ^1.0.55 => 1.0.55 
    gatsby-plugin-favicon: ^3.1.2 => 3.1.2 
    gatsby-plugin-feed: next => 2.0.0-beta.4 
    gatsby-plugin-google-analytics: next => 2.0.0-beta.3 
    gatsby-plugin-jss: next => 2.0.2-beta.3 
    gatsby-plugin-react-helmet: next => 3.0.0-beta.4 
    gatsby-plugin-sharp: next => 2.0.0-beta.7 
    gatsby-remark-copy-linked-files: next => 2.0.0-beta.3 
    gatsby-remark-images: next => 2.0.1-beta.9 
    gatsby-remark-prismjs: next => 3.0.0-beta.5 
    gatsby-remark-responsive-iframe: next => 2.0.0-beta.3 
    gatsby-remark-smartypants: next => 2.0.0-beta.3 
    gatsby-source-filesystem: next => 2.0.1-beta.10 
    gatsby-transformer-remark: next => 2.1.1-beta.5 
    gatsby-transformer-sharp: next => 2.1.1-beta.6 

File contents (if changed)

gatsby-config.js: N/A
package.json: N/A
gatsby-node.js: N/A
gatsby-browser.js: N/A
gatsby-ssr.js: N/A

[KyleAMathews]

This would be a great feature to add!

If you're interested in adding support for this, checkout the code at https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/internal-plugins/query-runner/file-parser.js

[alexkirsz]

I didn't realize that these queries were extracted statically, I thought they were resolved during SSR. As such, this probably defeats my original purpose, which was to create StaticQuery elements inside of a loop with custom arguments.

[jlengstorf]

@alexkirsz at the moment, StaticQuery isn't intended to accept GraphQL arguments, and adding that functionality isn't on our roadmap. We'd be happy to see a pull request if someone wants to tackle this, but for now I'm going to close this issue since StaticQuery is working as intended.

[MichaelDimmitt]

@jlengstorf, @alexkirsz; rewritten into a page query not StaticQuery.
I believe the query still has the same error.

// https://www.gatsbyjs.org/docs/why-gatsby-uses-graphql/

export const query= graphql(`
  query Query($limit: Int!) {
    allSitePage(limit: $limit) {
      edges {
        node {
          id
        }
      }
    }
  }
`, { limit: 3 })

export default ({data}) => (
  <div>{data.allSitePage.edges[0].node.id}</div>
);

However, I am wondering if maybe that is because I was not testing it in the template folder? https://github.com/ChristopherBiscardi/gatsby-mdx/issues/187

[jlengstorf]

@MichaelDimmitt it looks like this is a different flavor of graphql function. The syntax for page queries uses a template literal, and variables need to be passed via the context option in createPage. Check out this section on using GraphQL in Gatsby for the specifics of GraphQL queries in gatsby-node.js and in page components.