Gatsby GraphQL не может запросить поле «url» для типа «File» Strapi - PullRequest
Новая
       229

Gatsby GraphQL не может запросить поле «url» для типа «File» Strapi

1 голос
/ 09 июля 2020

Я веду блог с интерфейсом Gatsby и серверной частью Strapi. Я сделал запрос в компоненте со StaticQuery 

query={graphql`
        query {
          allStrapiArticle {
            edges {
              node {
                strapiId
                title
                category {
                  name
                }
                image {
                  url
                }
              }
            }
          }
        }
      `}

Все поля отлично работают без image{url}. Получил ошибку: error Cannot query field "url" on type "File" graphql/template-strings. Как я могу это исправить? Спасибо!

Ответы [ 2 ]

2 голосов
/ 16 июля 2020

Я тоже столкнулся с этой проблемой. Учебник по Strapi предлагает запрос с 'url', но это неверно.

Правильный способ запроса - это сделать: 

      allStrapiArticle {
        edges {
          node {
            strapiId
            title
            category {
              name
            }
            image {
              publicURL
            }
          }
        }
      }

Чтобы отобразить изображение, не забудьте поменять местами url на publicURL вот так: 

  <img
    src={article.node.image.publicURL}
    alt={article.node.image.publicURL}
    height="100"
  />
1 голос
/ 09 июля 2020

Несмотря на то, что вы создали объект изображения с полем url в Strapi, Strapi + Gatsby загружает его, и вы должны немного изменить свой запрос.

На этом этапе все ваши изображения принадлежат gatsby-source-filesystem, поэтому их нужно запрашивать другим способом. Конечно, вы можете получить url, но ваша структура данных может отличаться от той, которую вы создали в бэк-офисе Strapi. Другими словами, поле, которое вы ищете, находится внутри другого объекта, в этом случае publicURL будет содержать ваше желаемое значение url. Вот пример того, как получить одно или несколько изображений: 

    singleImage {
     publicURL
    }
    multipleImages {
      localFile {
        publicURL
      }
    }

Ссылка: https://github.com/strapi/gatsby-source-strapi

Взгляните на автозаполнение когда вы запускаете разработку gatsby под localhost:8000/___graphql игровую площадку для тестирования своего запроса GraphQL, это может помочь вам получить нужные поля.

В этом руководстве также указаны некоторые интересные вещи.

Если вы хотите использовать изображение на основе gatsby-image, вы можете использовать: 

  image {
    childImageSharp {
      fluid(maxWidth: 960) {
        ...GatsbyImageSharpFluid
      }
    }
  }

Затем его следует использовать в al oop что-то вроде (с использованием gatsby-image) : 

<Img fluid={data.allStrapiArticle.edges[position].index.image.childImageSharp.fluid} />
...