几天前我发现了Hasura，我一直在阅读文档以尝试熟悉操作、订阅和一般查询。
我也是盖茨比的新手，但我设法(在很多教程的帮助下(构建了一个小项目，该项目从Hasura获取数据并使用盖茨比显示它。
但我真正想知道的一件事是如何设置从盖茨比到哈苏拉的数据突变。
例如：在Gatsby项目中添加一个博客文章创建工具，以便用户可以创建自定义帖子，并将这些帖子添加到Hasura数据库中，以便我以后能够查询它们。
正如评论中提到的，这是一个非常广泛的问题，但是在将盖茨比和哈苏拉整合了几次之后，我可以给出一些指示。
让我们从基础开始：
- Hasura 基本上是一个可以通过 GraphQL 层与之交互的数据库。 它通常用于简单的 CRUD 操作，其中几乎不需要服务器端逻辑(尽管绝对可以实现更复杂的逻辑(。
- Gatsby 是一个用 React 编写的静态站点生成器。Gatsby 应用程序具有混合数据获取功能：一些数据可以在构建时获取以生成静态页面，但其他数据也可以在客户端获取，就像在任何 React 应用程序中一样。
您描述的方案意味着客户端和服务器端操作：
在Gatsby项目中添加一个博客文章创建工具，以便用户可以创建自定义帖子，并将这些帖子添加到Hasura数据库中[...]
这将在客户端发生，因为您需要用户输入。
[...]所以我以后可以查询它们
这可以在客户端和服务器端完成。如果你有能力等待你的网站重建，盖茨比的做法是在构建时查询这些。
使用 Gatsby 获取客户端运行时数据
我将更多地介绍客户端数据获取，因为您的问题提到了：
我真正想知道的一件事是如何设置从盖茨比到哈苏拉的数据突变
在Gatsby中，没有内置的方法可以在客户端进行GraphQL突变。Gatsby GraphQL 仅在构建时使用。
然而，如上所述，Gatsby 应用程序本质上是一个 React 应用程序：你可以像在 React 项目中一样获取数据。下面是一个展示构建时和运行时数据获取的示例：
import React, { useState, useEffect } from "react"
import { graphql, useStaticQuery } from "gatsby"
const IndexPage = () => {
// Build Time Data Fetching
const gatsbyRepoData = useStaticQuery(graphql`
query {
github {
repository(name: "gatsby", owner: "gatsbyjs") {
id
nameWithOwner
url
}
}
}
`)
// Client-side Runtime Data Fetching
const [starsCount, setStarsCount] = useState(0)
useEffect(() => {
// get data from GitHub api
fetch(`https://api.github.com/repos/gatsbyjs/gatsby`)
.then(response => response.json()) // parse JSON from request
.then(resultData => {
setStarsCount(resultData.stargazers_count)
}) // set data for the number of stars
}, [])
return (
<section>
<p>
Build Time Data: Gatsby repo{` `}
<a href={gatsbyRepoData.github.repository.url}>
{gatsbyRepoData.github.repository.nameWithOwner}
</a>
</p>
<p>Runtime Data: Star count for the Gatsby repo {starsCount}</p>
</section>
)
}
export default IndexPage
(来源：在客户端运行时获取数据(
使用 GraphQL 获取客户端数据
上面的例子使用浏览器的fetchAPI，但如上所述，Hasura 的一个好处是公开了一个 GraphQL 端点。
那么如何使用 GraphQL 进行客户端查询和突变呢？
在 React 应用程序中实现此目的的常用方法是使用 Apollo。而且因为盖茨比是一个 React 应用程序，你自然也可以使用它！
AI建议从阅读Apollo Client的入门指南开始。对于盖茨比特定的实现，看看Jason Lengstorf的盖茨比与阿波罗的例子。
与盖茨比、阿波罗和哈苏拉一起玩得开心！