Is there a way to utilize a field as a filter in one graphql query to retrieve a dynamic image from a distinct query?

Question

Is there a way to utilize a field as a filter in one graphql query to retrieve a dynamic image from a distinct query?

I'm currently working with two GraphQL sources - one for fluid images and the other for characters stored in a MongoDB database. My main task involves mapping these characters onto a page, using their names as filters to retrieve the corresponding image (based on the "originalName" field). Here is what my query looks like:

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

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 were not using GraphQL, I would simply set the src attribute of the image to `"champ.name"` like this:

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

How can I filter my image query with the champ.name? Would utilizing Apollo be beneficial for this scenario?

javascript graphql jsx gatsby

Answer 1

Answer №1

Gatsby is currently unable to accept variables in queries due to limitations outlined in this GitHub issue https://github.com/gatsbyjs/gatsby/issues/10482

If it were possible to pass variables, I would structure all characters as a page query to manipulate the name from props, and then use a static query with the name as a filter.

Answer 2

Gatsby is currently unable to accept variables in queries due to limitations outlined in this GitHub issue https://github.com/gatsbyjs/gatsby/issues/10482

If it were possible to pass variables, I would structure all characters as a page query to manipulate the name from props, and then use a static query with the name as a filter.

Answer 3

Answer №2

After finding a helpful solution online, I decided to tweak it to better suit my project's requirements: Using Variables in graphQL queries

In the main component, I iterate through all the champions and generate a child component for each one, passing along the champion's name.

Within the child component, there is a variable called "name" that links to the correct node containing the image I need to display. By matching the champion's name with the image's relativePath (which shares the same exact name), I utilize the find method to locate the right image. The renderImage function then takes the "name" variable and locates the fluid image within node.childImageSharp.fluid, successfully creating the image component with the appropriate fluid image source.

import React from "react"
import { useStaticQuery, graphql } from "gatsby"
import { displayName } from "../../utils/championName"
import * as S from "../styled/ChampionGridCard"

const renderImage = file => {
  return <S.ChampionImage fluid={file.node.childImageSharp.fluid} />
}

const ChampionGridCard = props => {
  const data = useStaticQuery(graphql`
    {
      allFile(filter: { sourceInstanceName: { eq: "champImages" } }) {
        edges {
          node {
            extension
            relativePath
            childImageSharp {
              fluid {
                ...GatsbyImageSharpFluid
              }
            }
          }
        }
      }
    }
  `)

  const name = data.allFile.edges.find(
    image => image.node.relativePath === `ssbu/${props.champName}.jpg`
  )

  return (
    <S.ChampionGridCard to={`/champ/${props.champName}`}>
      <S.ChampionImageWrapper>{renderImage(name)}</S.ChampionImageWrapper>
    </S.ChampionGridCard>
  )
}

export default ChampionGridCard

Answer 4

After finding a helpful solution online, I decided to tweak it to better suit my project's requirements: Using Variables in graphQL queries

In the main component, I iterate through all the champions and generate a child component for each one, passing along the champion's name.

Within the child component, there is a variable called "name" that links to the correct node containing the image I need to display. By matching the champion's name with the image's relativePath (which shares the same exact name), I utilize the find method to locate the right image. The renderImage function then takes the "name" variable and locates the fluid image within node.childImageSharp.fluid, successfully creating the image component with the appropriate fluid image source.

import React from "react"
import { useStaticQuery, graphql } from "gatsby"
import { displayName } from "../../utils/championName"
import * as S from "../styled/ChampionGridCard"

const renderImage = file => {
  return <S.ChampionImage fluid={file.node.childImageSharp.fluid} />
}

const ChampionGridCard = props => {
  const data = useStaticQuery(graphql`
    {
      allFile(filter: { sourceInstanceName: { eq: "champImages" } }) {
        edges {
          node {
            extension
            relativePath
            childImageSharp {
              fluid {
                ...GatsbyImageSharpFluid
              }
            }
          }
        }
      }
    }
  `)

  const name = data.allFile.edges.find(
    image => image.node.relativePath === `ssbu/${props.champName}.jpg`
  )

  return (
    <S.ChampionGridCard to={`/champ/${props.champName}`}>
      <S.ChampionImageWrapper>{renderImage(name)}</S.ChampionImageWrapper>
    </S.ChampionGridCard>
  )
}

export default ChampionGridCard

Is there a way to utilize a field as a filter in one graphql query to retrieve a dynamic image from a distinct query?

Answer №1

Answer №2

Similar questions

Having trouble with getting v-cloak to function properly when dealing with asynchronous requests

How can we efficiently trigger a function that sends an axios request by leveraging data from a v-for loop?

Analyze the length of time and provide a percentage of similarity

Obtaining user roles from server without using JWT tokens

What causes req.sessions to show an empty object instead of the expected value?

How can you call a JavaScript function from C# using SignalR?

Angular's sanitization script incorrectly modifies the URL value provided in the script src attribute

What is the best method for retrieving a specific element nested within another element, employing a for loop and storing it in an array using JavaScript?

jQuery is experiencing issues when attempting to add multiple rows to a table

Experiencing an unexpected abundance of console logs when implementing React Hooks

Generate a new span element within a div element programmatically using Vuex

Retrieve a specific value from an array of objects by searching for a particular object's value

Variability in the values returned by the useState hook

For an unknown reason, I am facing difficulties in using the Storage feature from @angular/fire in ANGULAR 16

JavaScript is reliant on the presence of the alert() function to properly function

Button click not triggering JQuery datepicker functionality

Is it achievable to create a seamless fade in/out effect using jQuery?

What is the best approach for sending a binary image post request to an API using nodejs?

Learn how to manipulate data within a MongoDB database schema using Node.js and Mongoose: inserting, saving, and updating records

Tips for choosing a specific cell in a table