FaqaDB на стороне клиента graphql с gatsby js не рендерится, пока страница не обновится

Question

Я использовал этот учебник https://css-tricks.com/build-a-dynamic-jamstack-app-with-gatsbyjs-and-faunadb/ в качестве руководства для некоторых динамических c обновлений контента с помощью faunadb и gatsby js. Теперь у меня все работает в определенной степени. Проблема, с которой я сталкиваюсь, заключается в том, что, если я обновляю базу данных вручную или, в конечном итоге, в лямбда-функции, я хочу, чтобы запрос graphql вызывал изменение состояния и повторную реакцию в ответ. Что происходит, я вижу новые данные только на странице refre sh. В соответствии с этой статьей предполагается, что это гидратация на стороне клиента, но я не получаю желаемого эффекта при изменении БД.

Любая помощь будет принята с благодарностью

Вот моя страница Гэтсби

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>
)