FeatureImage не отображается в GraqhiQL, Gatsby - PullRequest
Новая
       27

FeatureImage не отображается в GraqhiQL, Gatsby

1 голос
/ 01 августа 2020

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

код запроса 

query MyQuery {
  allContentfulBlogPost {
    edges {
      node {
        author {
          name
        }
        createdAt
        body {
          body
        }
        title 
        featuredImage {
          file {
            url
          }
        }
      }
    }
  }
}

вывод:

"message": "Cannot query field \"featuredImage\" on type \"ContentfulBlogPost\".",

почему FeatureImage не появляется в allContentfulBlogPost ? и как я могу его найти?

my gatsby-config. js file: 

plugins: [
    `gatsby-plugin-react-helmet`,
    `gatsby-image`,
    `gatsby-transformer-remark`,
    {
      resolve: `gatsby-remark-images`,
      options: {
        maxWidth: 740,
        wrapperStyle: `margin-bottom: 2.2rem;`,
      },
    },

Я уже добавил изображения gatsby-image и gatsby-comment-images но это не помогло.

если у вас есть какие-либо представления об этом топи c, пожалуйста, ответьте.

любой ответ приветствуется

Ответы [ 2 ]

1 голос
/ 04 августа 2020

Gatsby предоставляет GraphQL для извлечения данных без замечаний. 

import { graphql } from "gatsby"

export const pageQuery = graphql`
  query BlogPostBySlug($slug: String!) {
    contentfulBlog(slug: { eq: $slug }) {
      blogTitle
      blogImage {
        fluid (maxWidth: 500) {
          ...GatsbyContentfulFluid_withWebp
        }
        title
        resize {
          src
          width
          height
        }
      } 
    }
  }
`

Как вы можете видеть в запросе, вы можете извлекать изображения с помощью гибкого или фиксированного. Я получил изображение, используя жидкость и webp, поскольку тип изображения webp - идеальный выбор для оценки Lighthouse. И используйте тег Img (не img) для отображения изображения. 

<Img fluid={post.blogImage.fluid} alt={post.blogImage.title} />

https://www.gatsbyjs.org/packages/gatsby-image/

0 голосов
/ 02 августа 2020

Проблема исходит со стороны Contentful, она ломается, не дойдя до вашего приложения Gatsby (при сборе данных), поэтому ваш gatsby-remark-images не исправляет ее.

При работе с изображениями в Contentful вы должны загрузить фиктивный образ для вашей новой схемы (featuredImage). Просто изображение, которое нужно получить с помощью запроса GraphQL. Впоследствии вы можете заменить это изображение на свое окончательное содержимое.

Это связано с тем, что внутренне схема GraphQL не может определить тип изображения (это может случиться и с другими полями других типов), если вы этого не сделаете. Не загружайте его хотя бы один раз для вашей модели контента allContentfulBlogPost. Это известная ошибка, которую следует обходить таким образом, пока они не исправят ее.

...