[Bug] reloadClientData() does not reload site data

Short description I am using site.yaml file to store site data and in development mode I want to hot-reload site data on every change in site.yaml.

Steps to reproduce the issue

1. Create new project using react-static v7.0.5 using blank template.
2. Add data/site.yaml with following contents to the project:

title: My Site!

1. You will need to install node-watch and js-yaml for the next step:

$ yarn add node-watch js-yaml

1. Add getSiteData and a watcher for data/site.yaml inside static.config.js like this:

import fs from 'fs'
import path from 'path'
import yaml from 'js-yaml'
import watch from 'node-watch'
import { reloadClientData } from 'react-static/node'

const dataDir = path.join(__dirname, 'data')

watch(dataDir, { recursive: true, filter: /\.(?:yaml|yml)$/ }, (evt, name) => {
  console.log(`Detected changes in '${name}',  reloading client data...`)
  reloadClientData()
})

export default {
  maxThreads: 1, // Remove this when you start doing any static generation
  getSiteData: () => {
    try {
      const rawSiteData = fs.readFileSync(path.join(dataDir, 'site.yaml'))
      const yamlSiteData = yaml.safeLoad(rawSiteData)
      console.log('SiteData: ', yamlSiteData)
      return yamlSiteData
    } catch(e) {
      console.error(e)
      return {}
    }
  }
}

1. Add use of const { title } = useSiteData() to the src/App.js component like this:

import React, { Suspense } from 'react'
import { useSiteData } from 'react-static'

import './app.css'
import logo from './logo.png'

const Title = () => {
  const { title } = useSiteData()
  return (
    <h1>{title}</h1>
  )
}

const App = () => (
  <Suspense fallback="Loading...">
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <Title />
      </header>
    </div>
  </Suspense>
)

export default App

1. Start development server
2. Try editing title in data/site.yaml and you’ll see that changes does not hot-reload. Also in the stdout of dev server you’ll see that reloadClientData() is called but it does not trigger call for getSiteData().

Solution that worked for me For now the only solution that worked for me is to add:

latestState = await fetchSiteData(latestState)

inside reloadClientData() inside runDevServer.js here.

The only downside is that now getSiteData() is called twice at the start of development server.

[Blobson]

As I remember Tenner had reworked the code a bit. I can take a closer look at it after I return from vacation on 18th of august.

[Blobson]

Try editing version inside node_modules/react-static/… Unfortunately, I can’t check it myself because I am away from my PC.