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
}
}
We are adding some docs today that clarify this actually!
@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.
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.