用 Headless CMS 和 Vue.js 构建 GraphQL API

在当今的互联网世界中，前端开发已经成为了最重要的技术之一。按照传统的开发方式，前端开发人员需要通过后端开发人员提供的 API 数据接口，进行数据查询，数据加工和页面渲染。然而，这种方式存在着很多缺陷，比如后端开发速度跟不上前端需求的快速迭代，API 接口变更需要前端协作等。

Headless CMS 的出现，很好地解决了这些问题。它以强大的内容管理能力和易用性闻名，而且支持 RESTful API ，也实现了 Headless （独立的数据）的状态。

而近年来，GraphQL 这项技术也越来越受到前端开发人员的重视和使用。相比于传统的 RESTful API，GraphQL 具有更优秀的性能，安全性和可扩展性。

这篇文章将介绍如何使用 Headless CMS 和 Vue.js 构建 GraphQL API。

技术架构

本文采用的技术架构如下：

Headless CMS (此处选用 Strapi)
Vue.js
GraphQL

Strapi 搭建数据源

Strapi 是一种现代化的 CMS，能够生成面向 RESTful API 的完全可定制的代码，也能够集成 GraphQL 查询接口。

我们在 Strapi 中创建一个简单的数据表，并为其定义一个 Content Type（内容类型）。

（1）安装与运行 Strapi

首先需要安装 Node.js 和 Npm 。采用下面命令来安装 Strapi：

npm install strapi@alpha -g

运行 Strapi：

strapi new my-project

这里新建了一个名为 my-project 的 Strapi 项目。接下来我们要进入这个项目并启动。

cd my-project

strapi start

到此处，你应该可以看到 Strapi 应用正在运行。你可以访问：http://localhost:1337/admin 进入 Strapi 管理界面。

（2）创建一个 Content Type

在 Strapi 管理界面中，点击左侧菜单栏的 Content Types ，然后点击 Add New Content Type。

创建一个 Content Type，它将成为在 Vue.js 中显示数据的数据源。

在创建的界面中，选择 Single Type，并输入一个名称（此处我们输入 Posts）。

然后点击 Add Field，创建一个新的字段。

在这里，我们创建一个标题字段 title 和一个内容字段 content。设置标题字段为必填项，并将标题字段标题下移。

还有一个字段 Image，其类型为 Media Library。Strapi 具有一个功能强大的媒体库，我们能够在里面存储和管理应用程序使用的所有图片和文件。

这样我们完成了数据源的创建。

安装和配置 Apollo 客户端

在 Vue.js 中，我们将使用Apollo客户端来发出 GraphQL 查询。

使用 npm 安装 Vue.js 和 apollo-client。

npm install apollo-client vue-apollo graphql-tag

在 main.js 文件中，我们可以初始化 Apollo 客户端实例。

// main.js import Vue from 'vue'; import App from './App.vue'; import ApolloClient from 'apollo-client'; import VueApollo from 'vue-apollo';

Vue.use(VueApollo);

const apolloClient = new ApolloClient({ uri: 'http://localhost:1337/graphql', });

// Create the apolloProvider instance const apolloProvider = new VueApollo({ defaultClient: apolloClient, });

new Vue({ apolloProvider, render: h => h(App), }).$mount('#app');

我们创建了 Apollo 客户端实例，它将与 Strapi 上的 GraphQL API 进行通信。

编写 Query

我们来编写 Vue.js 中的一个查询帖子的 Query。

在 Vue.js 的模板文件中，我们可以向 apolloProvider 注入 apollo.queries 对象。这个对象包含通过 VueApollo 实例执行的所有查询。

我们将编写一个名为 Posts 的查询。这个查询需要一个 id 变量，并返回帖子的标题，内容和日期。

我们将把查询存储在单独的文件中。

// src/graphql/PostQuery.gql

import headers

query Posts($id: ID!) { post(id: $id) { title content created_at } }

然后我们在 Vue.js 组件中调用这个查询。

我们使用 created() 生命周期钩子，跟踪 Vue.js 组件的实例化。然后我们将 ID 变量设置为传递给 Vue.js 组件的 props。最后，我们使用 apollo.queries 提供的组件，触发查询，并处理响应。

// FakePost.vue

error:

这样，我们就可以在页面中显示我们的查询结果了。

结论

使用 Headless CMS 和 Vue.js 构建 GraphQL API 可以为我们提供更灵活和高效的方式来处理数据。通过使用 Strapi 数据源来生成 GraphQL API 的查询带来了许多好处，使我们能够更快地构建自己的应用程序。GraphQL 的查询方式与 RESTful API 不同，更易于前端开发人员处理数据。同时，使用 Vue.js 的组件化结构可以让我们更容易地创建可复用和可维护的代码。

本文提供的例子很简单，但是该技术对于构建更为复杂的 Web 应用程序来说是必不可少的。

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

用 Headless CMS 和 Vue.js 构建 GraphQL API

import headers

{{ data.post.title }}

{{ data.post.content }}