如何在盖茨比的graggql上查询正文

Question

我正试图使用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

不起作用所以我错过了一些东西，但我找不到它是什么。

Answer 1

正如您所说，body现在已被弃用，取而代之的是raw，以使我们在从Contentful中获取资源时在创建自定义输出时具有更大的灵活性。

这个想法，给出了一个类似的查询：

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节点，请在localhost:8000/___graphql检查其可用性。输出应该完全相同。

在获得响应对象和引用之后，这个想法是使用Contentful支持的Richtext React Renderer:

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)}

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

<div dangerouslySetInnerHTML={{__html: props.data.contentfulBlogPost.body.raw}} />;

因为这是原始内容。