Как дать Гэтсби схему GraphQL

Во-первых, вы используете плагины Gatsby-plugin-sharp, Gatsby-transform-sharp и Gatsby-source-WordPress?

На моем сайте используется подключаемый модуль Gatsby-source-Wordpress плюс библиотека Sharp, а также Bluebird для возврата обещаний и т. д. Определите ImageURL на вашем Post.js или Page.js. Исходный URL создается при загрузке в мою библиотеку мультимедиа, но выгружается в корзину S3, потому что мой сайт WordPress построен «программно». Исходный URL-адрес обычно определяется вами и может быть выбран в типах полей ACF при создании публикации шаблона страницы.

export const pageQuery = graphql`
  query homePageQuery {
    site {
      siteMetadata {
        title
        subtitle
        description
      }
    }

    allWordpressPost(sort: { fields: [date] }) {
      edges {
        node {
          title
          excerpt
          slug
          type
          _image{
            source_url
          }
          categories {
            slug
            name
          }
        }
      }
    }
  } 

Запрос данных в точном порядке является обязательным для каждого типа сообщения, иначе GraphQL не вернет схему правильно, что приведет к ошибке. Как бы просто это ни звучало и дублировало, временами должны быть две разные схемы GraphQL и два примера post.js, post1.js и post2.js файлов, определяющих разные категории сообщений. 1. Запрос на возврат с URL-адресом изображений. 2. Запрос на возврат без изображений. равным нулю или несуществующему Это недостаток GraphQL, он ожидает получить X, а когда происходит Y, он становится недовольным и терпит неудачу.

Вы также можете попробовать это, когда вы получаете изображение, преобразуйте его с резкостью в href = и преобразуйте его с https, чтобы изменить его размер при получении. Но в вашем случае схема должна быть нулевой. Мы сделали это для страницы с биографией сотрудника, которая была возвращена со старого сайта WordPress.

/**
     * Transform internal absolute link to relative.
     * 
     * @param {string} string The HTML to run link replacemnt on
     */
    linkReplace(string) {
        // console.info(string)
        const formatted = string.replace(
            /(href = "https?://dev-your-image-api\.pantheonsite\.io/)/g,
            `href = "/`
        )

        return formatted
    }

    render() {
        const post = { ...this.props.data.wordpressPost }
        const headshot = { ...this.props.data.file.childImageSharp.resolutions }
        const { percentScrolled } = { ...this.state }
        const contentFormatted = this.linkReplace(post.content)

        return (
            <div ref = {el => (this.post = el)}>
                <div className = {styles.progressBarWrapper}>
                    <div
                        style = {{ width: `${percentScrolled}%` }}
                        className = {styles.progressBar}
                    />
                </div>

                <div className = {styles.post}>
                    <h1
                        className = {styles.title}
                        dangerouslySetInnerHTML = {{ __html: post.title }}
                    />

                    <div
                        className = {styles.content}
                        dangerouslySetInnerHTML = {{ __html: contentFormatted }}
                    />

                    <Bio headshot = {headshot} horizontal = {true} />
                </div>
            </div>
        )
    }
}

Post.propTypes = {
    data: PropTypes.object.isRequired,
}

export default Post

export const postQuery = graphql`
    query currentPostQuery($id: String!) {
        wordpressPost(id: { eq: $id }) {
            wordpress_id
            title
            content
            slug
        }
        file(relativePath: { eq: "your-image-headshot.jpg" }) {
            childImageSharp {
                resolutions(width: 300, height: 300) {
                    ...GatsbyImageSharpResolutions
                }
            }
        }
    }

`

Надеюсь, это поможет не стесняться написать мне.

С момента этого поста прошло некоторое время, но, начиная с версии 2.2, Гэтсби добавил новый API значительно упростит настройку схемы. Это пример не с wordpress, а с gatsby-transformer-remark от Gatsby, но я уверен, что это применимо.

У меня связка .md с лицевой панелью выглядит так:

---
title: "Screen title"
image: "./hero-image.png"  <--- sometimes it's an empty string, ""
category: "Cat"
---

...content...

Если Гэтсби сначала доберется до .md с пустым образом, он неправильно выведет это поле как String, даже если это должно быть File. С новым API я могу сообщить Гэтсби о поле изображения в gatsby-node.js:

exports.sourceNodes = ({ actions, schema }) => {
  const { createTypes } = actions
  createTypes(`
    type MarkdownRemarkFrontmatter {
      image: File
    }

    type MarkdownRemark implements Node {
      frontmatter: MarkdownRemarkFrontmatter
    }
  `)
}

Это гарантирует, что поле image всегда будет иметь тип файла, в противном случае это будет null.

Некоторые примечания:

• Корневые узлы, такие как MarkdownRemark, должны реализовывать Node
• Узел может реализовать несколько интерфейсов
• Вы должны «прокладывать свой путь» до соответствующей области. В этом примере я должен объявить тип MarkdownRemarkFrontmatter, а затем передать его в поле frontmatter в узле MarkdownRemark.
• Гэтсби выведет остальные поля, если они не указаны. В приведенном выше примере, поскольку я не указал поле category в MarkdownRemarkFrontmatter, оно будет выведено Гэтсби, как и раньше.
• Самый полезный способ найти эти типы (MarkdownRemark, MarkdownRemarkFrontmatter) - это искать их в graphiql (по умолчанию localhost:8000/___graphql)