Headless CMS 与 GraphQL API 的使用对比-JavaScript中文网-JavaScript教程资源分享门户

随着现代 web 应用的普及，前端开发越来越强调数据和信息的获取和展示。如何优雅地管理数据成为一个重要的问题。传统的 CMS（内容管理系统）乍听上去貌似能够胜任这个任务，但是对于大规模的 web 应用，传统 CMS 显然承载不了如此大量的数据和请求。

有一种新兴的解决方案，Headless CMS 系统。

Headless CMS 与传统 CMS 最大的不同在于它去掉了其它端的渲染，比如 presentation tier - 即 views，它只关心 data tier - 即 model，或 data 的组织，存储，获取，更新。这使得我们可以在上面轻松地构建前端核心数据架构，同时使其与传统 CMS 做到了无缝衔接。

GraphQL 则是一种强类型编程语言，用于定义和查询 API。GraphQL 能够让前端开发者设计自己需要的 API，并让后端开发者负责实现。GraphQL 能够将多个数据源的数据聚合在一起，并让前端开发者更加直接获取和使用想要的数据。

接下来我们将对 Headless CMS 和 GraphQL 的使用进行对比。

Headless CMS 的优点

Headless CMS 后端非常适用于管理内容。我们经营的系统通过查询我们所需的数据，将数据传递给我们的前端系统。Headless CMS 和传统 CMS 之间的最大区别在于，前端根据自己的规则来处理数据，这样我们可以定义自己的模板、方便地复用模板和组件。Headless CMS 还可以通过 web APIs 以更加灵活的方式连接到我们的应用中。

下面是一个使用 Headless CMS 的代码示例：

// javascriptcn.com 代码示例
import { createClient } from 'contentful'

const client = contentful.createClient({
  space: 'your-space-id',
  accessToken: 'your-access-token'
})

// Get all entries of content type 'blogPost'
client.getEntries({
  content_type: 'blogPost'
})
  .then((response) => {
    // work with response
  })

GraphQL 的优点

GraphQL 的好处在于它可以直接从前端对服务器请求所需数据，而无需额外的轮询或 HTTP 请求。我们可以直接在 GraphQL schema 中编写自己的查询，然后发送到服务器端以获取我们所需的数据。这种语法使查询非常安全，无需生成查询语言，我们可以直接调用字段、聚合等。GraphQL 还能直接进行多源 API 访问，包括传统的 API 和数据库。

下面是一个使用 GraphQL 的代码示例：

query {
  viewer {
    name
    email
  }
}

Headless CMS 和 GraphQL 的结合

Headless CMS 后端可以和 GraphQL 一起使用，以提供 API 和服务器查询端点。Headless CMS 可以充当 data tier，而 GraphQL 查询和类型则代表了 presentation tier。这意味着可以使用 Headless CMS 来存储数据，然后使用 GraphQL API 和服务器来处理查询。Headless CMS 和 GraphQL 相结合，让我们能够将这两个技术的优势充分发挥。例如，下面的代码中，我们首先从 Headless CMS 中取得所需的数据，然后使用 GraphQL 对其进行过滤。

// javascriptcn.com 代码示例
import { createClient } from 'contentful'
import { graphql } from 'gatsby'

const client = contentful.createClient({
  space: 'your-space-id',
  accessToken: 'your-access-token'
})

function Blog({ data }) {
  return (
    <div>
      <h1>{data.contentfulBlogPost.title}</h1>
      <div dangerouslySetInnerHTML={{__html: data.contentfulBlogPost.content.childMarkdownRemark.html}} />
    </div>
  )
}

export const pageQuery = graphql`
  query($slug: String!) {
    contentfulBlogPost(slug: { eq: $slug }) {
      title
      content {
        childMarkdownRemark {
          html
        }
      }
    }
  }
`

总结

Headless CMS 和 GraphQL 拥有各自的优点。Headless CMS 为我们后端的构建提供了灵活性。而 GraphQL 则允许我们更好的在前端应用程序中使用 API。两者结合可为我们带来更好的灵活性、数据组织和前端开发。在选择我们的后端时，我们需要多考虑使用 Headless CMS 系统；当我们需要更好地处理 API 请求时，我们需要多考虑使用 GraphQL。

希望这篇文章能对大家在前端开发时的技术选择有所帮助。

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