如何从盖茨比写信给哈苏拉？

Question

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

我也是 Gatsby 的新手，但我已经设法（在很多教程的帮助下）构建了一个从 [=22= 获取数据的小项目]Hasura 并使用 Gatsby 显示它。

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

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

Answer 1

正如中提到的，这是一个非常广泛的问题，但是我已经集成了几次Gatsby和Hasura，我可以提供一些指导。

让我们从基础开始：

Hasura is basically a database that you can interact with via a GraphQL layer. it's normally used for simple CRUD operations where little server-side logic is necessary (although it's definitely possible 来实现更复杂的逻辑）。
Gatsby is a static site generator written in React. Gatsby apps have hybrid data fetching：一些数据可以在构建时获取以生成静态页面，但其他数据也可以在客户端获取，就像在任何 React 应用程序中一样。

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

add a blog post creation tool inside the Gatsby project so a user can create custom posts and those posts are added to the Hasura database [...]

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

[...] so I'm able to query them later

这可以在客户端和服务器端完成。如果您有能力等待您的网站重建，Gatsby 的做法是在构建时查询这些。

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

我会多说一点关于客户端数据获取的内容，因为你的问题提到了：

one thing I really want to know is how to set up data mutations from Gatsby to 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 Client 的 Get started guide. For a Gatsby-specific implementation, take a look at Jason Lengstorf's Gatsby with Apollo 示例。

与 Gatsby、Apollo 和 Hasura 一起玩得开心！

如何从盖茨比写信给哈苏拉？

How to write to Hasura from Gatsby?

reactjs

graphql

gatsby

hasura

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

使用 GraphQL 获取客户端数据