如何在 Next.js 中集成 GraphCMS 的 Headless CMS-JavaScript中文网-JavaScript教程资源分享门户

如何在 Next.js 中集成 GraphCMS 的 Headless CMS

作为一名前端开发者，你可能已经听说过 Headless CMS。Headless CMS 是一种新兴的 CMS 架构，它分离了内容管理系统的内容渲染和内容管理部分。开发者可以使用任意的前端技术栈来构建客户端，而不再被 CMS 的模板引擎或后端限制了。这个架构使得前端与后端开发者都更加自由和独立，从而提高了开发效率和用户体验。

GraphCMS 是目前较为流行的 Headless CMS 之一。它提供了友好的 UI 和 API，以及易于使用的 GraphQL 语言。在这篇文章中，我们将介绍如何在 Next.js 中集成 GraphCMS 的 Headless CMS，并且通过一个简单的博客示例来展示如何获取和显示 GraphCMS 提供的数据。

创建 GraphCMS 数据模型

首先，我们需要创建一个 GraphCMS 数据模型。在 GraphCMS 的控制台中，我们可以创建一个新的模型类型，例如：BlogPost，这里定义了我们的博客文章的数据结构。BlogPost 模型有三个字段：title，content 和 slug。

接下来，在模型的 settings 页面上，我们需要选择我们想要暴露给客户端的字段。在我们的博客示例中，我们需要把 title，content 和 slug 这三个字段都勾选上，以确保这些字段可以被前端访问。

创建 Next.js 应用程序

接下来，我们需要使用 Next.js 创建一个应用程序。在终端中，输入以下命令：

npx create-next-app my-blog

这将创建一个名为 my-blog 的应用程序。

安装必要的依赖项

我们需要安装一些必要的依赖项，以便与 GraphCMS 的 API 进行交互。在终端中，进入 my-blog 目录，然后输入以下命令来安装这些依赖项：

npm install apollo-boost graphql graphql-tag isomorphic-unfetch

创建需要的组件

在 components 文件夹中，我们创建一个名为 BlogPostList.js 的组件。这个组件将在客户端（浏览器）显示所有的博客文章。在这个文件中，我们需要从 GraphCMS API 获取 data 并显示 data 中的 BlogPost。

import { gql } from 'apollo-boost'
import { useQuery } from '@apollo/react-hooks'

const ALL_BLOGPOSTS_QUERY = gql`
  query AllBlogpostsQuery {
    blogposts {
      title
      slug
      content
    }
  }
`

export default function BlogPostList() {
  const { loading, error, data } = useQuery(ALL_BLOGPOSTS_QUERY)

  if (loading) return <p>Loading...</p>
  if (error) return <p>Error: {error.message}</p>

  return (
    <div>
      <h1>Blog Posts</h1>
      {data.blogposts.map(blogpost => (
        <div key={blogpost.slug}>
          <h2>{blogpost.title}</h2>
          <p>{blogpost.content}</p>
        </div>
      ))}
    </div>
  )
}

还需要另一个文件 index.js ，用于将 BlogPostList 组件渲染到页面上。

import BlogPostList from '../components/BlogPostList'

export default function Home() {
  return (
    <div>
      <BlogPostList />
    </div>
  )
}

连接 GraphCMS API

现在我们需要连接到 GraphCMS API 并获取数据。我们需要创建一个名为 getBlogposts.js 的文件，在这个文件中，我们将使用 apollo-boost 库来创建 Apollo 客户端和 isomorphic-unfetch 库在服务端和客户端之间进行数据传输。在 getBlogposts.js 中，我们创建了一个名为 getAllPosts() 的异步函数，该函数会从 GraphCMS 获取数据。

import ApolloClient from 'apollo-boost'
import fetch from 'isomorphic-unfetch'

const client = new ApolloClient({
  uri: 'https://api-eu-central-1.graphcms.com/v2/<project-id>',
})

async function getAllBlogposts() {
  const { data } = await client.query({
    query: `
      query AllBlogpostsQuery {
        blogposts {
          title
          slug
          content
        }
      }
    `
  })
  return data
}

export default getAllBlogposts

我们还需要更新 BlogPostList.js 组件，以使用我们创建的 getAllBlogposts() 函数从 GraphCMS 获取博客文章。

import getAllBlogposts from '../lib/getBlogposts'

export default function BlogPostList(props) {
  const { data } = props

  return (
    <div>
      <h1>Blog Posts</h1>
      {data.blogposts.map(blogpost => (
        <div key={blogpost.slug}>
          <h2>{blogpost.title}</h2>
          <p>{blogpost.content}</p>
        </div>
      ))}
    </div>
  )
}

BlogPostList.getInitialProps = async function() {
  const data = await getAllBlogposts()
  return {
    data
  }
}

现在，我们已经成功地连接到 GraphCMS API，并可以获取博客文章的数据了。

写一篇博客文章

在 GraphCMS 中，我们可以创建新的博客文章。在我们的示例中，我们需要创建一个名为 My First Blog Post 的新博客文章。我们可以为它设置一个 slug，例如 my-first-blog-post，并添加一些内容。

本地启动应用程序

现在我们可以本地启动我们的应用程序。在终端中，输入以下命令：

npm run dev

这将在本地启动我们的 Next.js 应用程序，以便我们可以在浏览器中访问它。

访问博客文章

我们现在可以在浏览器中访问我们的博客文章。在地址栏中输入 http://localhost:3000，应该可以看到我们在 GraphCMS 中创建的博客文章被以标题和内容的形式呈现在了页面上。

此时，你已经成功的在 Next.js 中集成了 GraphCMS 的 Headless CMS。我们从 GraphCMS 中获取数据，然后通过 Next.js 将数据呈现在页面上。我们展示了如何获取数据，然后在客户端中渲染它们。

总结

通过本篇文章的实例，你将学会如何在 Next.js 中使用 GraphCMS 的 Headless CMS。Headless CMS 是一种更加灵活和高效的 CMS 架构，可以使前端和后端开发者更独立、更自由，提高开发效率和用户体验。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/658faea8eb4cecbf2d54871f