web-dev-qa-db-ja.com

GraphQLクエリの文字列補間

資産を取得するためのGatsbyとそのGraphQLクエリシステムには新しいものです。私は画像を取得して表示する作業コンポーネントImageを持っています。カスタマイズ可能なイメージの名前を持ちたいのですが、Ditの仕方を理解することはできません。

これが作業コンポーネントです。

_const Image = () => (
  <StaticQuery
    query={graphql`
      query {
        // fetching the image gatsby-astronaut.png
        placeholderImage: file(relativePath: { eq: "gatsby-astronaut.png" }) {
          childImageSharp {
            fluid(maxWidth: 300) {
              ...GatsbyImageSharpFluid
            }
          }
        }
      }
    `}
    render={data => <Img fluid={data.placeholderImage.childImageSharp.fluid} />}
  />
);
_

そしてここで私がカスタマイズ可能なイメージを持ってみようとしたことです：

_const Image = ({ imgName }: { imgName: string }) => (
  <StaticQuery
    query={graphql`
      query {
        // fetching the image imgName
        placeholderImage: file(relativePath: { eq: "${imgName}.png" }) {
          childImageSharp {
            fluid(maxWidth: 300) {
              ...GatsbyImageSharpFluid
            }
          }
        }
      }
    `}
    render={data => <Img fluid={data.placeholderImage.childImageSharp.fluid} />}
  />
);
_

しかし、クエリに次のエラーが発生します。

Expected 1 arguments, but got 2.ts(2554)

カスタマイズ可能なイメージ名はどうすればいいですか？

javascripttypescriptgraphqlgatsby
8
Baboo_

これが簡単な方法があります：

const Image = props => {
  const data = useStaticQuery(graphql`
    query {
      firstImg: file(relativePath: { eq: "firstImg.png" }) {
        childImageSharp {
          fluid(maxWidth: 300) {
            ...GatsbyImageSharpFluid
          }
        }
      }

      secondImg: file(
        relativePath: { eq: "secondImg.png" }
      ) {
        childImageSharp {
          fluid(maxWidth: 300) {
            ...GatsbyImageSharpFluid
          }
        }
      }
    }
  `)

  switch (props.name) {
    case "firstImg":
      return <Img fluid={data.firstImg.childImageSharp.fluid} />
    case "secondImg":
      return <Img fluid={data.secondImg.childImageSharp.fluid} />
    default:
      return <Img />
  }
}
 _

そしてこのようにそれを使う：

<Image name="firstImg" />
 _

このように表示したいすべてのイメージを使用してオブジェクトを紹介することで、Typo-Safeにすることもできます。

const Images = { firstImg: 'firstImg', secondImg: 'secondImg' }
 _

そしてこのようにそれを使う：

<Image name={Images.firstImage} />
 _

と

...
switch (props.name) {
case Images.firstImage:
...
 _
1
ramzesenok

確認 静的クエリのドキュメント

StaticQueryは、フラグメントを含めて、ページクエリが可能なもののほとんどを実行できます。主な違いは次のとおりです。

  • ページクエリは変数を（PageContextを介して）を受け入れることができますが、ページコンポーネントにのみ追加できます。
  • StaticQueryは変数を受け入れません（したがって「静的」という名前）が、ページを含む任意のコンポーネントで使用できます。

そのため、ページのクエリのイメージのGatsbyImageSharpFluidを照会し、それをFluar Propとして直接Gatsbyイメージに渡すことをお勧めします。

3
ksav