0

I was using this tutorial https://css-tricks.com/build-a-dynamic-jamstack-app-with-gatsbyjs-and-faunadb/ as a guide to do some dynamic content updates with faunadb and gatsbyjs. Now I have everything working to a certain extent. The issue I am having is if I update the database manually, or eventually in a lambda function, I want the graphql query to cause a state change and a rerender in react. What happens is I can see the new data only on a page refresh. According to this article this is supposed to be client side hydration, but I am not getting the desired effect, when the db changes.

Any help would greatly be appreciated

Here is my gatsby page

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

In gatsbybrowser.js I am doing the following

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>
)
Anders Kitson
  • 1,413
  • 6
  • 38
  • 98
  • 1
    hydration is filling a prerendered view with updated/current (at rendering time) data - it's not a subscription/polling, it won't update/monitor/react/whatever on external changes – xadm Apr 30 '20 at 00:23
  • Ok so basically what I'm wanting is impossible with Gatsby – Anders Kitson Apr 30 '20 at 00:33
  • it's not about gatsby (you can use it as optimisation of react app) - you need to use graphql subscriptions – xadm Apr 30 '20 at 00:43
  • ok I'll do some googling on graphql subscriptions. – Anders Kitson Apr 30 '20 at 00:46
  • unfortunately faunadb does not support subscriptions, but I am using localstorage in conjuction now, kind of got it working more details here https://stackoverflow.com/questions/61527973/in-react-check-if-page-has-refreshed-then-set-localstorage-off-of-graphql-query – Anders Kitson Apr 30 '20 at 16:43

0 Answers0