CODEWITHSUNDEEP
reactjsgraphqlgatsby
Semo
Semo

Reputation: 169

Dynamic graphQL query for Gatsby's gatsby-source-filesystem

Is there a way to dynamically make a graphQL query when using Gatsby's gatsby-source-filesystem plugin?

For example, I am looking to accomplish the following:

return (
    <StaticQuery
      query={graphql`
        query chartQuery {
          all${fileKey}Json {          <------- Is this a thing?
            nodes {
              name
              data
              color
            }
          }
        }
      `}

Ideally, I would like to pass the fileName as a prop.

Upvotes: 2

Views: 328

Answers (1)

coreyward
coreyward

Reputation: 80140

No. Gatsby extracts GraphQL queries from your source code via static analysis before the code is executed. As such, you cannot assemble them via string manipulation functions or interpolation—they'll be extracted character for character before they're evaluated as JavaScript.

That said, there are myriad other approaches to achieve whatever end goal you're after. You can, for example, add a custom “resolver”—a field that takes arguments and calls a function you provide to synthesize data. Or you can create new nodes altogether, adding your local filesystem data to the Gatsby GraphQL server in a way that suits your needs. Or layer on top of it by pre-parsing your files before Gatsby does and inserting the correct type into your query before Gatsby has a chance to extract the query. And so on.

Upvotes: 5

Related Questions