Gatsby: Question: Run graphQL query from within a template component with arguments from an array.

Created on 24 Jan 2018  Â·  6Comments  Â·  Source: gatsbyjs/gatsby

how do I run a graphql query to fetch an array of images based on an array which contains the ‘regex’ for the queries.

Lets say the props is an array of valid regex, something like - ['/a.jpg/', '/b.jpg/', '/c.jpg/', '/d.jpg/'] in my template component. I now need to run a query to fetch each of the above queries. How do I do this?

imageSharp(id: { regex: $imageregex }) {
      resolutions(width: 300, height: 200, cropFocus: CENTER) {
        ...GatsbyImageSharpResolutions
      }
 }
question or discussion

Most helpful comment

You can run as many queries as you'd like in a page component. You just might have to use aliases http://graphql.org/learn/queries/#aliases

We don't recommend fetching data for a page in gatsby-node.js other than what's necessary to pass as arguments to pages.

All 6 comments

We are adding some docs today that clarify this actually!

https://github.com/gatsbyjs/gatsby/pull/3687/files

@Jaikant short and perhaps not very helpful answer is you need to pass in the regex as "context" arguments to createPage. The context keys are set as graphql arguments when running that page's query.

https://www.gatsbyjs.org/docs/bound-action-creators/#createPage

@KyleAMathews @calcsam I was actually trying to run multiple queries within a single component. I guess thats not possible and may be for a good reason. Possibly I was not breaking up my components well. I worked around by running my first query in gatsby-node and then using the context to pass the regex to a template component.

You can run as many queries as you'd like in a page component. You just might have to use aliases http://graphql.org/learn/queries/#aliases

We don't recommend fetching data for a page in gatsby-node.js other than what's necessary to pass as arguments to pages.

@KyleAMathews not sure how to use aliases in my case, as aliases are pre-defined.
In my case the number of queries is the length of an array in "context". I wanted to run a query per array item.
This is not super important for me, as I managed to get the information by running the query in gatsby-node ( I realize you don't recommend it though .. wonder why?)

Yeah, we support the in operator for exact matches against an array of items but not regexes. That'd be a cool feature to add.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

dustinhorton picture dustinhorton  Â·  3Comments

theduke picture theduke  Â·  3Comments

magicly picture magicly  Â·  3Comments

ferMartz picture ferMartz  Â·  3Comments

dustinhorton picture dustinhorton  Â·  3Comments