3

私は、プロジェクトで Gatsby と GraphQL を少しの間使用しています。このプラットフォームを使用するのはこれが初めてなので、正しい方法をまだ見つけていません。

現在、次のような GraphQL クエリからユーザーのリストをロードする index.js があります。

  allUserList {
      users {
        name
        imageUrl
    }
  }
}

imageUrl は正しいファイル パスを送信する必要があります。つまり、images/image.png これは、ユーザー情報を表示するために使用される反応コンポーネントに直接送信されます。

const Users = {data} => {
  return (
    data.users.map(user => {
      return (
        <User name={user.name} imageUrl={user.imageUrl}/>
      )
    }
  )
}

私が今理解しようとしているのは、imageUrl にはコードベース内の画像への相対 URL が含まれているということです。この URL に対して画像クエリを実行して画像オブジェクトを取得し、それを gatsby 画像に渡す必要があります。このようなもの

{
  image: file(relativePath: { eq: 'image.png' }) {
    childImageSharp {
      fixed(width: 160, height: 160) {
        ...GatsbyImageSharpFixed
      }
    }
  }
}

ただし、私が理解しているように、ここで画像の URL をパラメーター化することはできません。これについて最善の方法は何ですか？これは、この方法で画像付きのリストを表示する正しいアプローチですか?

4

1 に答える 1

2

ただし、私が理解しているように、ここで画像の URL をパラメーター化することはできません。

正しい。Gatsby は、ビルド時に GraphQL クエリを 1 回実行しgatsby developますgatsby build。

2 つのアプローチ:

最初のアプローチ:にちなんで画像に名前を付けますuser.name。次に、すべての画像をクエリし、graphQLoriginalName属性を使用してファイル名で各ユーザーをフィルター処理できます。

const UserSupplier = () => {
  const { allFile } = useStaticQuery(graphql`
    query {
      allFile(filter: {
        extension: {regex: "/(jpg)|(jpeg)|(png)/"}, 
        sourceInstanceName: {eq: "user"}}) 
      {
        edges {
          node {
            childImageSharp {
              fluid(maxWidth: 150, quality: 100) {
                originalName
                ...GatsbyImageSharpFluid
              }
            }
          }
        }
      }
    }`);
  const user = users.filter(el => el.userId === userId)[0];
  const { fluid } = user .node.childImageSharp;

  return (
    <UserComponent>
      <GatsbyImage fluid={fluid} alt={fluid.originalName} />
    </UserComponent>
  );
};

2 番目のアプローチ:クエリでchildImageSharp画像オブジェクトをallUserListクエリします。画像をレンダリングするコンポーネントに画像を props として渡すことができます。これにより、ユーザーの数によっては、クエリ結果のクエリが非常にデータ集約的になります。

  allUserList {
      users {
        name
        imageUrl
        childImageSharp { // the query path is probably wrong since I don't know your project
          fixed(width: 160, height: 160) {
            ...GatsbyImageSharpFixed
        }
      }
    }
  }
}
于 2020-01-26T02:52:25.067 に答える