Gatsby学习04Gatsby插件从CMS内容管理系统（Strapi搭建）获取数据

Strapi 是基于 Node.js 的开源免费的 CMS 内容管理系统。

创建项目

npx create-strapi-app

本例选择 quickstart 快速创建项目&＃xff0c;并且不使用模板。

项目创建完成后会自动启动项目&＃xff0c;并且在浏览器打开。

首次访问需要注册用户&＃xff0c;注册后登录。

创建内容类型

打开 内容类型生成器&＃xff0c;创建 Post 分类&＃xff0c;并添加三个字段&＃xff1a;

• title&＃xff1a;文章标题
• date&＃xff1a;文章日期
• content&＃xff1a;文章内容

在创建 Post 内容类型后&＃xff0c;就会在左侧出现一个集合菜单 Posts&＃xff0c;可以添加发布文章内容&＃xff1a;

配置权限

默认添加的数据都是受保护的&＃xff0c;需要配置权限才能查询。

在角色和权限中配置 Public&＃xff08;普通访问者&＃xff09; 权限

查询数据

在勾选权限选项时右侧高级设置可以看到查询接口地址&＃xff0c;使用 Postman 测试&＃xff1a;

安装插件

要把 Strapi 的数据添加到数据层&＃xff0c;需要用到插件 gatsby-source-strapi。

配置插件

// gatsby-config.js
{resolve: "gatsby-source-strapi",options: {apiURL: "http://localhost:1337", // api 访问地址collectionTypes: ["Post"], // 允许访问的内容类型},
},


查看 GraphQL

重启 Gatsby 后&＃xff0c;GraphQL 左侧会增加 allStrapiPost 和 strapiPost 查询数据。

query MyQuery {allStrapiPost {nodes {idtitledatecontent}}
}