[Bug] reloadClientData() does not reload site data

[Blobson]

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!

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

$ yarn add node-watch js-yaml

4. 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 {}
    }
  }
}

5. 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

6. Start development server
7. 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.

[tannerlinsley]

The double call will be fixed in the patch version I'll release later today. Huzzah!

[happybeing]

Doesn't this fix also require the above mod to runDevServer.js:

latestState = await fetchSiteData(latestState)

EDIT: Actually even with that mod it isn't working for me with RS v7.1.0, but I'm just editing runDevServer.js. Maybe I need to rebuild something? Looking at the PR I think I may have misunderstood the fix so my change isn't necessary in theory. However, this is not working for me.

If I call reloadClientData() on a timer or when a content file changes it still doesn't work. getRoutes() is only called at the start and never called as a result of calling reloadClientData()

@Blobson does this still work for you in v7.1.0?
@SleeplessByte maybe needs re-opening?

[Blobson]

It doesn't fully work and I think the reason is the fetchSiteData() call missing in runDevServer.js

[happybeing]

I tried putting that in without success. It's it just a matter of editing or would I need to do anything else? I have RS installed globally with yarn.

…

On 11 August 2019 18:09:10 BST, Vladimir Klimov ***@***.***> wrote: It doesn't fully work and I think the reason is the `fetchSiteData()` call missing in runDevServer.js -- You are receiving this because you commented. Reply to this email directly or view it on GitHub: #1093 (comment)

-- Sent from my Android device with K-9 Mail. Please excuse my brevity.

[Blobson]

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

[happybeing]

Still no joy with this in my node_modules RS:

  reloadClientData.current = async () => {
    latestState = await fetchSiteData(latestState)
    socket.emit('message', { type: 'reloadClientData' })
  }

[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.

[SleeplessByte]

@theWebalyst certainly, although your issue might relate but not equate. After the maintenance update I'll actively work on React-Static including these issues.

[krishan711]

Hey i'm running into the same problem now. I'd love to contribute and will start based on the above. If anyone has more insights im sure it would be helpful

[krishan711]

Hey I made a PR to try and fix this by adding await buildDevRoutes into the reloadClientData call instead of just fetchSiteData. It seems to work locally, im trying to build a package to deploy now to test fully.

[krishan711]

@SleeplessByte i believe this can be closed now? it works with my locally built version "@kibalabs/react-static": "7.2.3-kiba.2" if anyone else has the same problem before 7.3.0 is release 👍

[SleeplessByte]

@krishan711 :)