1つのgraphqlクエリからのフィルターとしてフィールドを使用して、別のクエリに含まれる流動的な画像を取得するにはどうすればよいですか？
2つのgraphqlソースがあります。1つは流動的な画像用で、もう1つはmongoデータベースの文字用です。文字をページにマッピングしているので、文字名（ "allMongodbMobileLegendsdevChamps"の名前フィールド）をフィルターとして使用する必要があります（おそらくoriginalNameフィルターを使用）。だから私はこのようなものを持っています
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>
)
}graphqlを使用していなかった場合は、画像のsrcを次のように「champ.name」に設定します。
<Image src = `/path/to/img/${champ.name}.jpg` />champ.nameで画像クエリをフィルタリングするにはどうすればよいですか？このようなものにApolloを使用する必要がありますか？
回答
これはギャツビーであり、このGHの問題に従ってクエリに変数を渡すことができないため、現在は不可能です。 https://github.com/gatsbyjs/gatsby/issues/10482
変数を渡すことが可能であると仮定すると、すべての文字をページクエリとして作成し、小道具から名前を再構築してから、名前をフィルターとして渡す静的クエリを作成します。
私はこのソリューションを使用し、ニーズに合わせて少し調整しました：graphQLクエリの変数
親コンポーネントで、すべてのチャンピオンをマップし、それぞれの子コンポーネントを作成して、チャンピオン名を渡します。
子コンポーネントには、findメソッドを使用してチャンピオン名を画像relativePathに一致させることで表示する画像の正しいノードを格納する変数nameがあります（画像はチャンピオンとまったく同じ名前です） 。次に、変数「name」を使用してnode.childImageSharp.fluidで流体画像を検索し、正しい流体画像の場所で画像コンポーネントを作成する関数renderImageを呼び出します。
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