Как упоминалось в комментарии, это очень широкий вопрос , но, интегрировав несколько раз Гэтсби и Хасуру, я могу дать несколько советов.

Начнем с основ:

• Hasura - это, по сути, база данных, с которой вы можете взаимодействовать через слой GraphQL. обычно он используется для простых операций CRUD, где требуется небольшая логика на стороне сервера (хотя это определенно возможно реализовать более сложную логику).
• Gatsby - это генератор статических сайтов, написанный на React. В приложениях Gatsby есть гибридная выборка данных: некоторые данные могут быть извлечены во время сборки для создания статические страницы, но другие данные также могут быть получены на стороне клиента, как и в любом приложении React.

Сценарий, который вы описываете, подразумевает как клиентские, так и серверные операции:

добавить инструмент создания сообщений в блоге в проект Gatsby, чтобы пользователь мог создавать собственные сообщения, и эти сообщения добавляются в базу данных Hasura [...]

Это произойдет на стороне клиента, потому что вам нужен пользовательский ввод.

[...] так что я могу запросить их позже

Это может быть сделано как на стороне клиента, так и на стороне сервера. Если вы можете позволить себе подождать, пока ваш сайт перестроится, Gatsby может запросить их во время сборки.

Получение данных времени выполнения клиента с помощью 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

В приведенном выше примере используется fetch API браузера, но, как уже упоминалось, выше, преимущество Hasura заключается в том, что она предоставляет конечную точку GraphQL.

Итак, как вы можете использовать GraphQL для клиентских запросов и изменений?

Обычный способ добиться этого в приложениях React - использовать Apollo. А поскольку Gatsby - это приложение на React, вы, естественно, тоже можете его использовать!

AI предлагает начать с чтения Руководства по началу работы Apollo Client. Для конкретной реализации Гэтсби взгляните на пример Джейсона Ленгсторфа Gatsby with Apollo.

Развлекайтесь, строя вместе с Гэтсби, Аполлоном и Хасурой!