6

正如我看到的那样，在查询 contentfulBlogPost 时不再有 json 选项。我能够进行一些更改以从身体中获取所有内容，除了该帖子中的图像。

如果我在 GraphQL Playground 中进行了测试，我可以获得图像 id 和 url，仅此而已。

query {
  allContentfulAsset {
    edges {
      node {
        id
        file {
          url
        }
      }
    }
  }
}

我试图找到一个如何获取嵌入图像的示例，但没有运气......

import React from 'react'
import { graphql } from 'gatsby'
import { documentToReactComponents } from '@contentful/rich-text-react-renderer'

import Layout from '../components/layout'


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

const Blog = (props) => {
  const options = {
    renderNode: {
      "embedded-asset-block": (node) => {
        const alt = node.data.title
        const url = node.file.url
        return <img alt={alt} src={url}/>
      }
    }
  }
  return (
        <Layout>
          <h1>{props.data.contentfulBlogPost.title}</h1>
          <p>{props.data.contentfulBlogPost.publishedDate}</p>
          {documentToReactComponents(JSON.parse(props.data.contentfulBlogPost.body.raw, options))}
        </Layout>
    )
}

export default Blog

插件：

...
 'gatsby-plugin-sharp',
    {
      resolve:   'gatsby-transformer-remark',
      options: {
        plugins: [
          'gatsby-remark-relative-images',
          {
            resolve: 'gatsby-remark-images-contentful',
            options: {
              maxWidth: 750,
              linkImagesToOriginal: false
            }
          }
        ]
      }

    }
  ],
}
4

3 回答 3

5

嗨，我在 Youtube 评论中看到了这个解决方案。您要做的第一件事是将 Graphql 查询更改为如下内容：

    query ($slug: String!) {
      contentfulBlogPost(slug: {eq: $slug}) {
         id
         title
         publishedDate(formatString: "MMMM Do, YYYY")
         body {
            raw
            references {
               ... on ContentfulAsset {
                  contentful_id
                  title
                  file {
                     url
                  }
               }
            }
         }
      }
   }

然后将options常量更改为：

    const options = {
      renderNode: {
         [BLOCKS.EMBEDDED_ASSET]: node => {
            console.log(node);
            const imageID = node.data.target.sys.id;
            const {
               file: {url}, 
               title
            } = props.data.contentfulBlogPost.body.references.find(({contentful_id: id}) => id === imageID);

            return <img src={url} alt={title} />
         }
      }
   }
于 2021-01-28T04:00:08.360 回答
1

使用类似的东西：

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)

来源：https ://www.contentful.com/developers/docs/tutorials/general/rich-text-and-gatsby/

条目中的return声明BLOCKS.EMBEDDED_ASSET将包含您的数据，以适应您的需求。如果您进入依赖项，您将看到所有公开的方法，因此您还将有一个BLOCKS.EMBEDDED_ENTRY用于嵌入条目的条目。像这样应用它：

[BLOCKS.EMBEDDED_ENTRY]: node => {
  // your logic to manipulate the entry here
  return (
    <>
      <div>whatever</div>
    </>
  )
},
于 2021-01-21T14:18:47.017 回答
0

对于仍在努力在 graphql 中找到“引用”字段的任何人，请记住，您必须首先通过添加至少一个图像来创建内容条目。否则，引用字段将不会显示在 graphql 中，因此您无法查询它。

于 2021-08-23T19:06:21.523 回答