Contentful API 与 React 如何从数组项而不是整个数组中获取特定字段

Question

我正在尝试寻找使我的网站加载速度更快的方法，在运行速度测试之后，我了解到我在从 contentful 加载数据的方式上犯了一个错误。我有一个页面，其中列出了所有博客（只有他们的 title 和 image 以及博客列表中可见的一些其他详细信息），而不是仅从 contentful 中加载必要的字段我' m 为数组 posts 的每个数组项 (post) 加载所有字段，这自然会占用大量时间并使我的页面变慢。如何仅从博客列表页面的 contentful 加载特定字段，但当我们从列表中单击单个博客时加载所有字段。我正在使用 react static，这就是我的配置文件查找帖子部分的方式，其中路径 /blog 是主博客列表页面，/container/Post 是个人博客页面。

let posts = await client
      .getEntries({
        content_type: "blogPost",
        order: "-sys.createdAt",
        include: 1,
      })
      .then((response) => response.items)
      .catch(console.error);
    console.log("Post -> ", posts.length);

    posts = posts.sort((a, b) => {
      let keyA = new Date(a.fields.date);
      let keyB = new Date(b.fields.date);
      // Compare the 2 dates
      if (keyA < keyB) return 1;
      if (keyA > keyB) return -1;
      return 0;
    });

在我的return声明中

{
        path: "/blog",
        getData: () => ({
          posts,
        }),
        children: posts.map((post) => ({
          path: `/${urlBuilder(
            post.fields.url ? post.fields.url : post.fields.title
          )}`,
          template: "src/containers/Post",
          getData: () => ({
            post,
          }),
        })),
      },

这就是我的 posts return 从 contentful 中编辑出来的样子

Answer 1

您可以使用 select 运算符实现此目的。当使用 contentful sdk 时，这会转化为如下内容：

const contentful = require('contentful')

const client = contentful.createClient({
  space: '<space_id>',
  environment: '<environment_id>',
  accessToken: '<content_delivery_api_key>'
})

client.getEntries({
  content_type: '<content_type_id>',
  select: 'sys.id,fields.<field_name>'
})
.then((response) => console.log(response.items))
.catch(console.error)

请特别注意 select: 'sys.id,fields.<field_name>' 部分。您可以在此处仅指定要返回的字段。

Contentful API 与 React 如何从数组项而不是整个数组中获取特定字段

Contentful API with React how to get specific fields from array items instead of whole arrays

javascript

reactjs

contentful

contentful-api