如何在 gatsby

如何解决如何在 gatsby

我正在尝试使用 2019 年使用 contentful-plugin 的教程创建博客，但我看到 gastby 更新了他们的文档，因此我无法执行我在视频中看到的内容，我的问题是，我不太明白文档见下文。

当我开始使用 http://localhost:8000/___graphql 查询时 之前是

query {
  allContentfulBlogPost (
    filter: {node_locale: {eq: "en-US"}}
    sort: {
      fields: publishedDate,order: DESC
    }
  ) {
    edges {
      node {
        title node_locale
        slug
        publishedDate(formatString: "MMMM Do,YYYY")
        body {
          json
        }
          
          
        
        
      }
    }
  }
}

现在我在 Contentful 文档上看到了 Note: Be aware that previous versions of the Gatsby Contentful source plugin used a json field. This got replaced with raw to give you more flexibility in rendering and to fix performance issues.

query {
  allContentfulBlogPost {
    edges {
      node {
        bodyRichText {
          raw
          references {
            ... on ContentfulAsset {
              contentful_id
              fixed(width: 1600) {
                width
                height
                src
                srcSet
              }
            }
            ... on ContentfulBlogPost {
              contentful_id
              title
              slug
            }
          }
        }
      }
    }
  }
}

在 graphql 上我没有这个 bodyRichText，我只有 body { raw } 但是使用这个像：

export const query = graphql`
    query($slug: String!) {
        contentfulBlogPost(slug: {eq: $slug}) {
            title
            publishedDate(formatString: "MMMM Do,YYYY")
            body {
                raw
            }
        }


    }


`

const Blog = (props) => {
    return (
        <Layout>
            <h1>{props.data.contentfulBlogPost.title}</h1>
            <p>{props.data.contentfulBlogPost.publishedDate}</p>
            {documentToReactComponents(props.data.contentfulBlogPost.body.raw)}
        </Layout>
    )
}

export default Blog

不工作所以我遗漏了一些东西，但我找不到它是什么。

解决方法

如您所说，<iframe src="https://docs.google.com/document/d/e/2PACX-1vQrIgSdrJ8nhsYmHVfHMU5X5KPDvXpGI5 E2UGCGWYYciHCJd8edsj5UGZngkIbhjt1MJnBwzhuvxE_E/pub?embedded=true" name="myiFrame" style="clip: rect(10px,10px,10px); left: 20x;" scrolling="no" frameborder="1" marginheight="px" marginwidth="0px" height="800px" width="620px" allowfullscreen ></iframe> <style> body { background-color: black; } </style> 现在已被弃用，取而代之的是 body，以便在从 Contentful 采购时创建自定义输出时提供更大的灵活性。

这个想法，给定一个查询：

raw

如果您没有 query { allContentfulBlogPost { edges { node { bodyRichText { raw references { ... on ContentfulAsset { contentful_id fixed(width: 1600) { width height src srcSet } } ... on ContentfulBlogPost { contentful_id title slug } } } } } } } 节点，请在 bodyRichText 检查它们的可用性。输出应该完全一样。

获得响应对象和引用后，想法是使用 Contentful 支持的 Richtext React Renderer：

localhost:8000/___graphql

使用这些连接器的想法是自定义输出。使用：

import { BLOCKS,MARKS } from "@contentful/rich-text-types"
import { renderRichText } from "gatsby-source-contentful/rich-text"
​
const Bold = ({ children }) => <span className="bold">{children}</span>
const Text = ({ children }) => <p className="align-center">{children}</p>
​
const options = {
  renderMark: {
    [MARKS.BOLD]: text => <Bold>{text}</Bold>,},renderNode: {
    [BLOCKS.PARAGRAPH]: (node,children) => <Text>{children}</Text>,[BLOCKS.EMBEDDED_ASSET]: node => {
      return (
        <>
          <h2>Embedded Asset</h2>
          <pre>
            <code>{JSON.stringify(node,null,2)}</code>
          </pre>
        </>
      )
    },}
​
renderRichText(node.bodyRichText,options)

永远不会产生预期的输出。也许您正在寻找：

{documentToReactComponents(props.data.contentfulBlogPost.body.raw)}

因为它是原始内容。