Отображение списка изображений с Gatsby Image и Graphql

Question

Я немного поработал с Gatsby и GraphQL над проектом. Я впервые использую эту платформу, поэтому все еще выясняю правильный путь к go.

Сейчас у меня есть индекс. js, который загружает список пользователей из запроса GraphQL, например как

  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, чтобы получить объект изображения, который я затем смогу передать в изображение Гэтсби. Примерно так

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

Однако, насколько я понимаю, здесь невозможно параметризовать URL-адрес изображения. Каков лучший способ go об этом? Это даже правильный подход, чтобы показать список с изображениями таким образом?

Answer 1

Однако, насколько я понимаю, здесь невозможно параметризовать URL-адрес изображения.

Правильно. Гэтсби запускает запросы GraphQL ОДИН РАЗ во время сборки, а затем никогда больше, пока вы снова не наберете gatsby develop или gatsby build.

Два подхода:

Первый подход: Вы называете свой изображения после user.name. Затем вы можете запросить все ваши изображения и отфильтровать для каждого пользователя по имени файла, используя атрибут graphQL originalName:

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>
  );
};

Второй подход: Запрос для вашего childImageSharp объекта изображения в Ваш allUserList запрос. Вы можете передать изображение в качестве реквизита компоненту, который отображает изображение. Это сделало бы ваш запрос результатов запроса довольно интенсивным в зависимости от количества пользователей.

  allUserList {
      users {
        name
        imageUrl
        childImageSharp { // the query path is probably wrong since I don't know your project
          fixed(width: 160, height: 160) {
            ...GatsbyImageSharpFixed
        }
      }
    }
  }
}