Как предоставить Gatsby схему GraphQL

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

Мой сайт использует Gatsby-source-Wordpress Plugin плюс острую библиотеку, а также 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 и два файла post1.js post.js и post2.js, определяющие разные категории сообщений. 1.Query для возврата с URL-адресами изображений. 2.Query для возврата без изображений. равным нулю или несуществующим. Это падение GraphQL, которое он ожидает получить X, и когда Y случается, он становится недовольным и терпит неудачу.

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

/**
     * Transform internal absolute link to relative.
     * 
     * @param {string} string The HTML to run link replacemnt on
     */
    linkReplace(string) {
        // console.log(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
                }
            }
        }
    }

`

Надеюсь, что это поможет мне рассказать.