0

我正在使用本教程https://css-tricks.com/build-a-dynamic-jamstack-app-with-gatsbyjs-and-faunadb/作为指南，使用 zoodb 和 gatsbyjs 进行一些动态内容更新。现在我的一切都在某种程度上发挥了作用。我遇到的问题是，如果我手动更新数据库，或者最终在 lambda 函数中更新，我希望 graphql 查询导致状态更改并重新渲染反应。发生的情况是我只能在页面刷新时看到新数据。根据这篇文章，这应该是客户端水合，但是当数据库发生变化时，我没有得到预期的效果。

任何帮助将不胜感激

这是我的盖茨比页面

import React, { useState } from 'react';
import Layout from "../components/layout"
import { gql } from "apollo-boost"
import { useQuery } from "@apollo/react-hooks"
import { graphql } from "gatsby"


const HIT_COUNTER = gql`
  query HitCounter{
      findHitCounterByID(id: "0248392") {
        amount
      }
  }
`

const IndexPage = () => {
  const { loading, data } = useQuery(HIT_COUNTER);

  return (
    <Layout>

        {data.findHitCounterByID.amount}

    </Layout>
  )

}

export default IndexPage

在 gatsbybrowser.js 我正在执行以下操作

import React from "react"
import ApolloClient from "apollo-boost"
import { ApolloProvider } from "react-apollo"

const client = new ApolloClient({
  uri: "https://graphql.fauna.com/graphql",
  request: operation => {
    operation.setContext({
      headers: {
        Authorization: `Bearer ${process.env.GATSBY_FAUNA_DB}`,
      },
    })
  },
})

export const wrapRootElement = ({ element }) => (
  <ApolloProvider client={client}>{element}</ApolloProvider>
)
4

0 回答 0