如何从盖茨比写给Hasura？

Question

几天前我发现了 Hasura ，我一直在阅读文档以尝试熟悉操作，订阅以及一般的查询。

我还是 Gatsby 的新手，但我设法（在许多教程的帮助下）建立了一个小项目，该项目从 Hasura 中获取数据，并且使用盖茨比显示它。

但是我真正想知道的一件事是如何设置从 Gatsby 到 Hasura 的数据变异。

例如：在Gatsby项目中添加博客文章创建工具，以便用户可以创建自定义文章，并将这些文章添加到Hasura数据库中，以便稍后查询。

Answer 1

如a comment中所述，这是一个非常广泛的问题，但是将Gatsby和Hasura整合了几次之后，我可以给出一些建议。

让我们从基础开始：

• Hasura基本上是一个数据库，您可以通过GraphQL层与之交互。通常用于简单的CRUD操作，而不需要服务器端逻辑（尽管实现复杂的逻辑肯定是possible）。
• Gatsby是用React编写的静态站点生成器。 Gatsby应用程序具有hybrid data fetching：可以在构建时获取一些数据以生成静态页面，但是也可以像在任何React应用程序中一样在客户端获取其他数据。

您所描述的场景暗示了客户端和服务器端的操作：

在Gatsby项目中添加博客帖子创建工具，以便用户可以创建自定义帖子，并将这些帖子添加到Hasura数据库[...]

这将在客户端发生，因为您需要用户输入。

[...]所以我以后可以查询它们

这可以在客户端和服务器端完成。如果您有足够的时间等待站点重建，那么Gatsby的处理方式是在构建时对其进行查询。

使用Gatsby提取客户端运行时数据

我将再介绍一些有关客户端数据获取的内容，因为您的问题中提到：

我真正想知道的一件事是如何设置从盖茨比到Hasura的数据突变

在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

（来源：Fetching data at client-side runtime）

使用GraphQL获取客户端数据

上面的示例使用了浏览器的fetch API，但是如上所述，Hasura的好处是它公开了GraphQL端点。

那么如何使用GraphQL进行客户端查询和变异？

在React应用程序中实现此目的的一种常见方法是使用Apollo。而且由于Gatsby是React应用，您自然也可以使用它！

AI建议先阅读Apollo客户的Get started guide。对于特定于Gatsby的实现，请看Jason Lengstorf的Gatsby with Apollo示例。

与盖茨比，阿波罗和哈苏拉一起玩乐！