Gatsby怎么给Hasura写信？

Question

几天前，我发现了Hasura，我一直在阅读文档，试图熟悉操作、订阅和一般查询。

我也是Gatsby的新手，但我已经设法(在许多教程的帮助下)构建了一个小项目，该项目从Hasura获取数据并使用Gatsby显示。

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

例如:在Gatsby项目中添加一个博客帖子创建工具，这样用户就可以创建自定义的帖子，并且这些帖子被添加到Hasura数据库中，所以我可以稍后查询它们。

Answer 1

正如在评论中提到的，这是一个非常广泛的问题，但是在集成了盖茨比和哈苏拉几次之后，我可以给出一些提示。

让我们从基础开始：

• 哈苏拉基本上是一个数据库，您可以通过GraphQL层与其进行交互。它通常用于简单的CRUD操作，在这些操作中需要很少的服务器端逻辑(尽管实现更复杂的逻辑肯定是可能 )。
• 盖茨比是用React编写的静态站点生成器。盖茨比应用程序有混合数据获取：一些数据可以在构建时获取以生成静态页面，但其他数据也可以在客户端抓取，就像在任何反作用应用中一样。

您所描述的场景意味着客户端操作和服务器端操作：

在Gatsby项目中添加一个博客帖子创建工具，这样用户就可以创建自定义帖子，并且这些帖子被添加到Hasura数据库中.

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

..。所以我可以稍后再查询

这可以在客户端和服务器端完成。如果您可以等待您的站点重建，那么Gatsby的方法就是在构建时查询这些。

用Gatsby获取客户端运行时数据

我将更多地介绍客户端数据获取，因为您的问题提到：

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

盖茨比没有内置的方式来做GraphQL突变，客户端。盖茨比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获取客户端数据

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

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

在React应用程序中实现这一目标的一个常见方法是使用阿波罗。因为盖茨比是一个反应应用，你也可以自然地使用它！

AI建议从阅读阿波罗客户的入门指南开始。对于特定于盖茨比的实现，请查看Jason的盖茨比与阿波罗示例。

与盖茨比，阿波罗和哈苏拉一起享受美好的建筑吧！