GatsbyJS初学者指南【GraphQL】
《GatsbyJS入门指南》
我在以下的书籍中学习了GatsbyJS的入门。
《GatsbyJS指南》- mottox2(つのぶえ出版)- BOOTH
如果按照书籍的步骤进行,即使是React的初学者也可以顺利进行,无需特别担心。
-
- React + JSX 反应 + JSX
-
- GatsbyJS 加茨比JS
- GatsbyJS + Headless CMS 加茨比JS + 无头CMS
然而,我觉得GraphQL部分非常困难。
为了避免其他人有类似的困扰而产生“GatsbyJS真的很麻烦。。。”的想法,
我建议大家阅读官方教程中的GraphQL部分。
盖茨比和GraphQL
公式教程「Gatsby中的数据」
以上的教程部分是关于在Gatsby中编写非常简单的GraphQL查询的部分。
正如下面的引用所述,通过使用GraphQL,Gatsby可以统一数据获取的方式。
在React组件中加载数据有许多选项。
填補補救
根据上述公式教程,GraphQL似乎并非必需的。
通过使用createPagesAPI,我们可以在无需在组件中编写GraphQL的情况下传递数据。
没有GraphQL的Gatsby。
GraphQL和GraphiQL
公式教程“源插件”
在上述教程中,我们使用gatsby-source-filesystem插件来从GatsbyJS项目中的文件中获取文件信息,并通过GraphQL进行输出。
另外,我们可以使用GraphiQL来获取GraphQL查询。你可以学习GraphiQL的基本用法和快捷方式。
阅读介绍图书时,有时对内容跟不上,也没能完全理解GraphiQL的便利之处。但是完成了上述教程后,你就会明白GraphiQL的方便之处。
补充
也许在使用GatsbyJS构建网站时,按照以下步骤创建可能会更容易理解数据流。
-
- 内容创作(可以使用文件或无头CMS)
-
- 安装源插件
-
- 使用GraphiQL创建查询
-
- 使用GraphiQL的“代码导出器”复制GraphQL查询代码
- 从以上代码中创建组件