错误“为路径 / 构建静态 HTML 失败” - gatsby, apollo答案

【问题标题】：Error "building static HTML failed for path /" - gatsby, apollo错误“为路径 / 构建静态 HTML 失败” - gatsby, apollo
【发布时间】：2021-11-30 01:40:00
【问题描述】：

由于我在我的 gatsby 项目中添加了突变（apollo），我之前没有尝试过突变，并且我正在努力解决下面的问题，我也收到了这样一个错误“为路径 / 构建静态 HTML 失败”如：

Page data from page-data.json for the failed page /: {
  "componentChunkName": "component---src-pages-index-js",
  "path": /,
  "result": {
    "pageContext": {}
  },
  "staticQueryHashes": [
    "2589983788"
  ]
}

这是 SSR 的问题，我应该如何称呼突变？我不应该为此使用阿波罗吗？

这是一个页面 index.js，其中发生了突变：


   
import * as React from "react"
import { useState } from "react"
import gql from "graphql-tag"
import { useStaticQuery, graphq } from "gatsby"

const HomePage = () => {
  const [messageValue, setMessageValue] = useState("")
  const CONTACT_MUTATION = gql`
    mutation CreateSubmissionMutation(
      $clientMutationId: String!
      $message: String!
    ) {
      createSubmission(
        input: {
          clientMutationId: $clientMutationId
          message: $message
        }
      ) {
        success
        data
      }
    }
  `
  return (
    <main>
      <Mutation mutation={CONTACT_MUTATION}>
        {(createSubmission, { loading, error, data }) => (
          <React.Fragment>
            <form
              onSubmit={async event => {
                event.preventDefault()
                createSubmission({
                  variables: {
                    clientMutationId: "example",
                    message: messageValue,
                  },
                })
              }}
            >
              <label htmlFor="messageInput">Message: </label>
              <textarea
                id="messageInput"
                value={messageValue}
                onChange={event => {
                  setMessageValue(event.target.value)
                }}
              ></textarea>

              <button type="submit">Send it!</button>
            </form>

            <div style={{ padding: "20px" }}>
              {loading && <p>Loading...</p>}
              {error && (
                <p>An unknown error has occured, please try again later...</p>
              )}
              {data && <p>yeah boi</p>}
            </div>
          </React.Fragment>
        )}
      </Mutation>
    </main>
  )
}

export default HomePage

感谢您提前提供帮助。

【问题讨论】：

标签： reactjs wordpress gatsby apollo

【解决方案1】：

已解决，我添加了 if 语句来渲染突变：

const isBrowser = typeof window !== "undefined"

和：

      {isBrowser && (<Mutation mutation={CONTACT_MUTATION}>...</Mutation>)}

如果有人认为有更好的方法，请发表评论。

【讨论】：