Gatsby: Persist State between pages using `react-easy-state`

[thebarty]

Hi guys,

I'd love to use https://github.com/solkimicreb/react-easy-state with gatsby.

The problem is that the global state is LOST when switching routes.

Does anyone have this working?

[pieh]

I'm not familiar with this package but I would guess you would need to have some kind of singleton global store - possibly set this up in gatsby-browser (for reference this how something like this can be done for react-redux - https://github.com/gatsbyjs/gatsby/blob/master/examples/using-redux/gatsby-browser.js )

[solkimicreb]

Hi @thebarty !

I am not familiar with Gatsby but I guess it generates static sites and send them over to the client. If you need to share a lot of state between static pages it is perhaps not the best idea to use a static site generator.

State can still be shared though, if you persist it in localStorage. There is already a helper for that in react-easy-params. It's an premade store - called storage - which is automatically persisted to localStorage when it mutates.

import React from 'react'
import {  view } from react-easy-state
import { storage } from 'react-easy-params'

// storage.num is persisted between sessions (static pages)
const increment = () => storage.num++

export default view(() => <p onClick={increment}>{storage.num}</p>)

Just store everything on the storage object from react-easy-params instead of your own stores to gain free data persistence. You can nest data to any level (for namespacing) - just like with normal stores.

I hope this helped a bit.

[KyleAMathews]

@solkimicreb Gatsby SSR pages during its build but when the site loads, it's a normal React app at that point so state can be persisted as normal in memory for sessions (though localstorage is a great option for persisting across sessions).

[solkimicreb]

Thanks for the heads up! I have no idea why the state is lost between pages then 🙁 @thebarty could you provide a small code example?

[tsimons]

I'm running in to this issue as well now. I'm using React 16.3 context api to store my data to make querying it across components easier. At first I hade the Provider component at the root of each page, but state would be wiped out because it was a new Provider on each page.

I followed @pieh suggestion and put it above the router via the replaceRouter api in gatsby-browser, but this means the data isn't available when building the static files. I'm kind of at a loss right now. I think the only simple way to solve the issue for me is to have an SSR api for injecting a component above the router.

[tsimons]

Just figured it out. I found this article in the docs that talks about redux: https://www.gatsbyjs.org/docs/debugging-replace-renderer-api/#initial-setup

We need to inject providers using both the gatsby-browser and gatsby-ssr apis. This would be an extremely helpful guide to include in the docs. I'd be willing to take a crack at it once I get some downtime

[KyleAMathews]

Due to the high volume of issues, we're closing out older ones without recent activity. Please open a new issue if you need help!