I'm stuggling to figure out how to query for multiple specific images with GraphQL in Gatsbyjs. My initial thought was to do something like this:

file(relativePath: {eq: "images/front.jpg"}) {
  id
}
file(relativePath: {eq: "images/front2.jpg"}) {
  id
}

I'm stuggling to figure out how to query for multiple specific images with GraphQL in Gatsbyjs. My initial thought was to do something like this:

file(relativePath: {eq: "images/front.jpg"}) {
  id
}
file(relativePath: {eq: "images/front2.jpg"}) {
  id
}

This throws an error in GraphQL:

{
  "errors": [
    {
      "message": "Fields \"file\" conflict because they have differing arguments. Use different aliases on the fields to fetch both if this was intentional.",
      "locations": [
        {
          "line": 28,
          "column": 1
        },
        {
          "line": 31,
          "column": 1
        }
      ]
    }
  ]
}

Querying for one specific file (image) works fine:

file(relativePath: {eq: "images/front.jpg"}) {
  id
}

Any suggesting of what I'm doing wrong here? Thanks :)

• javascript
• reactjs
• graphql
• gatsby

1 Answer 1

Found out the trick is to use aliases as described in the graphQL docs

In my case changing the query to this seems to do the trick:

front: file(relativePath: {eq: "images/front.jpg"}) {
  id
}
front2: file(relativePath: {eq: "images/front2.jpg"}) {
  id
}