I have two graphql sources, one for fluid images and one for characters in a mongo database. I'm mapping the characters to the page and I need to use the character names (the name field in the "allMongodbMobileLegendsdevChamps") as a filter (using originalName filter possibly) to find the fluid img. So I have something like this

```js
query MyQuery {
  allMongodbMobileLegendsdevChamps {
    nodes {
      name
    }
  }
  allImageSharp(filter: {fluid: {originalName: {eq: "characterName.jpg"}}}) {
    nodes {
      fluid {
        ...allImageSharpFluid
      }
    }
  }
}
```

```js
const Index = ({ data }) => {
  const {
    allMongodbMobileLegendsdevChamps: { nodes: champs },
    allImageSharp: { nodes: fluid },
  } = data
  return (
    <section className={grid}>
      {champs.map(champ => {
        return (
          <Link to={`/champ/${champ.name}`}>
            <Image fluid={fluid.fluid} />
            <h3>{champ.name}</h3>
          </Link>
        )
      })}
    </section>
  )
}
```

If I wasnt using graphql, I'd just set the src in image to "champ.name" like this:

```js
<Image src = `/path/to/img/${champ.name}.jpg` />
```

How can I filter my image query with the champ.name? Should I use Apollo for something like this?