[gatsby-link] support passing state data in navigateTo

[SanthoshRaju91]

Description

Hi, wanted to know if it is possible to send data in programmatic navigation navigateTo() in gatsby link. Check the index.js file of gatsby-link, but seems there is not option to send in any data.

So that the rendering component gets it in the location.state object.

Environment

Gatsby version: 1.1.28
Node.js version: 8.9.4
Operating System: Mac OS

Expected behavior

Should be able to send data via navigateTo like

navigateTo('/pathname',  {
 id: 7,
 firstname: 'John Doe'
});

Please let me know the technicality of the index.js file of gatsby-link especially window.__navigateTo(), so I can help you with a PR, if you find this a appropriate question.

[calcsam]

Currently Gatsby doesn't support passing history state. If you'd like to implement, please feel free to -- you'd need to pass along props eg here:

https://github.com/gatsbyjs/gatsby/blob/c1d47bbc9e7f7d0989c7e57cc5423202eec38fca/packages/gatsby/cache-dir/production-app.js

https://github.com/gatsbyjs/gatsby/blob/dcfa0fab32e168c075c052dde7ecd97736c6147a/packages/gatsby/cache-dir/root.js

[SanthoshRaju91]

Happy to help with this change.

So I went via the two files you have mentioned, I need to make change in the window.___history.push(pathname) to now except the state, something like below.

window.___history.push(pathname, state).

Change the public API navigateTo to except the second parameter "state" and finally make change in the documentation for programmatic routing section, that it will now except state as a second argument to the navigateTo().

Currently I'm checking the test case for this, will update if there is any change required to the test suite as well. Please let me know if my approach is appropriate.

Regards

[SanthoshRaju91]

@calcsam, my friend found a way to resolve this issue. But I didn't quite understand how this worked after seeing the navigateTo() API.

To send data, he used the below method.

navigateTo({
    pathname: '/user',
    data: {
        id: 1,
        name: 'John Doe'
    }
})

And at the resulting route /user, we get the data via this.props.location;

{
    pathname: '/user',
    data: {
        user: 1,
        name: 'John Doe'
    }
}

[nicholaai]

+1

Interested in having this feature as well. Looking forward to your implementation @SanthoshRaju91! Are you guys going to open a PR?

[nsimonson]

I actually just realized I needed to do this when I couldn't get history state to work on a production site. #3802 will let you call navigateTo with a standard location object so you could say:

navigateTo({
  pathname: '/user',
  state: {
    user: 1,
    name: 'John Doe',
  },
})