Gatsby: navigate / Link doesn't trigger refresh of current page when updating location state

[gavinlimely]

I think I've spotted a bug with the Link / navigate component. The below code is accessible via /search-results, I've simplified it to hopefully make the bug easier to sport.

When on /search-results, if you click the "Update Months" . I would expect the content to change to say "36 Months", however this doesn't update unless you refresh the page.

If I placed that same code on another route (Home for example), then clicked it. It would link to the /search-results page with the location.state prop correctly populated.

It looks as though when updating the location.state prop of the current page, the old location.state prop is used until a manual refresh of the page is performed.

This does work as expected when using gatsby develop. The bug only occurs after running gatsby build.

import React from "react"
import {Link} from "gatsby"

import Layout from "../layouts/index"

class SearchResultsPage extends React.Component {

    showData() {
        if (this.props.location.state) {
            if (this.props.location.state.months) {
                return (
                    <div>
                        <p>{this.props.location.state.months} Months</p>
                    </div>
                )
            } else {
                return <p>No data.</p>
            }
        }
    }

    render() {
        return (
            <Layout>
                <div>{this.showData()}</div>
                <Link to="/search-results/" state={{months: 36}}>Update Months</Link>
            </Layout>
        )
    }
}

export default SearchResultsPage

The reason I need this is for a form component that I'd like to include globally in the footer which can effectively submit to itself using the navigate function imperatively in an onSubmit event, even if already on the /form-submitted route.

[gavinlimely]

Update, as a work around.. instead of using on this.props.location.state. You can use: import { globalHistory } from "@reach/router", then globalHistory.location.state has the correct value & the content updates as expected.

[universse]

You have a sample site?

[gavinlimely]

I don't have a sample site, is what I've put above not enough to go off?

If not, do I need to put something online? Or is it just a code repository you're after?

Thanks

[jonniebigodes]

@gavinlimely if you can make a reproduction following these steps so that the issue can be looked at in more detail.

[universse]

@gavinlimely This is an open-source project. More often than not, people who are contributing, whether writing code or addressing issues, are doing so out of their free time. Having a ready-made reproduction helps speed things up a lot. It also get your issue answered more quickly.

In this case, guess a code repository is good enough since I can put it on codesandbox to poke around.

[universse]

But from what I can see, you are not handling updates to this.props(.location.state) via componentDidUpdate.

[gavinlimely]

Hi @universse

Please see this repository: https://github.com/gavinlimely/gatsby-navigate-issue/

I've also added a console.log in the componentDidUpdate hook. So you can see the this.props.location.state doesn't update as expected when linking to the current page with new state parameters.

Note, this does work when using gatsby develop. Just not in production mode, so not sure if it will be reproducible within CodeSandBox?

Let me know if you have any more questions.

Thanks again 👍

[universse]

Thanks for the repo. After some investigation, I believe this is a bug in Gatsby internals.

I will open a PR soon.

[gavinlimely]

No problem, thank you very much for your help.

[universse]

Fixed in 2.15.36.

[joshuaalanestep]

@gavinlimely Did the update to 2.15.36 fix this issue for you? I'm using 2.19.21 and I think I'm having the same issue. I tried using globalHistory from @reach/router, but that didn't work. Can you elaborate on your workaround?

Thanks in advance for your help.