Gatsby: Gatsby-link : change url query string

[cyrilepinat]

Hi,
I'm using navigateTo to change my url search query. I want to stay on the same page, but I want to change the params in url. For example, on click, I call navigateTo(`${location.pathname}${newSearchQuery}`); to go from /resources to /resources?type=webinar.

When my app is built with gatsby build, the url is actually updated but the page isn't rerendered and I can see in the console A page wasn't found for "/resources?type=webinar".

So my question is :
Is it the good way to change a search query in the url ? If no, what's the best way to achieve that ? I didn't found anything about that in the doc.

Thks for your help.

[KyleAMathews]

You're using this navigateTo? https://www.gatsbyjs.org/packages/gatsby-link/#programmatic-navigation

[KyleAMathews]

Also what version of Gatsby are you on?

[cyrilepinat]

Ah yes sorry, I'm using
gatsby : 1.9.21
gatsby-link : 1.6.16

I'm using navigateTo from gatsby-link yes.
Is there another way to do ?

[KyleAMathews]

No this should work. Since it's not it sounds like a bug. I don't have time to look at this in the short term but if you'd like to work on a fix for the problem, you probably want to start looking here: https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/cache-dir/find-page.js

[KyleAMathews]

The error is raised here just after a call to find page https://github.com/gatsbyjs/gatsby/blob/943842aba304b889869d929767b888bf3e641462/packages/gatsby/cache-dir/loader.js#L251

[cyrilepinat]

Ok I'll try to look at this as soon as possible, thks for your feedback.

[cyrilepinat]

I'm investigating since few hours in gatsby develop mode, but I can just see that calling navigateTo with same pathname (only a different search query) is not calling findPage, so nothing happens. What I can see is that when calling navigateTo, history.listen is called, and so apiRunner('onRouteUpdate'), but then apiRunner doesn't find 'onRouteUpdate' api in plugins (as it is not existing) and nothing happens. The render function in root.js is never called either. So the page is not refreshed. Does it make you think to something ? Could you help me to find where is the bug, I'm not understanding very well how it works. :confused:

[cyrilepinat]

ok I found it there is a check between old component and new one, so shouldComponentUpdate in ComponentRenderer is returning false in my case
https://github.com/gatsbyjs/gatsby/blob/3ffe266b4f0d5bcb6ff465570edbe75f1fea62c7/packages/gatsby/cache-dir/component-renderer.js#L67

[cyrilepinat]

I tried this. Not sure there is no regression but all tests are green. What do you think ?
https://github.com/gatsbyjs/gatsby/pull/2084

[vinaypuppal]

Hi,

• I am experiencing this issue in the production build.
• I created this demo https://public-stwunudhnh.now.sh/ and below gif to show whats happening.
  

• I just created default gatsby site using

  1. gatsby new gatsby-example-site

  2. Changed /src/pages/page-2.js to below code

         import React from 'react';
         import Link from 'gatsby-link';
     
         const SecondPage = ({ location }) => (
           <div>
             <h1>Hi from the second page</h1>
             <p>Welcome to page 2</p>
             <p>Query: {location.search}</p>
             <p>
               <Link to="/">Go back to the homepage</Link>
             </p>
             <p>
               <Link to="/page-2?query=1">Go to `/page-2?query=1`</Link>
             </p>
             <p>
               <Link to="/page-2?query=2">Go to `/page-2?query=2`</Link>
             </p>
           </div>
         );
     
         export default SecondPage;
     
     

• BTW in development, it's working fine. Check this gif
  

@cyrilepinat I saw your PR is merged but this issue is not closed do you still experiencing this issue like above?

Thanks

[cyrilepinat]

Hi, wow long time ago, I don't remember very well, but as I can see in our website we switched from query string to hash paramareter :smiley: as a workaround so maybe it was not fix you're right.

[blazeu]

@cyrilepinat navigateTo('#hash') doesn't work for me as well..

[cyrilepinat]

which gatbsy version do you use ? mine is 1.9.146

[blazeu]

gatsby 1.9.214
gatsby-link 1.6.37

Anyway, replaced navigateTo with window.___history.push and it works now.

[vinaypuppal]

I'm using

"gatsby": "^1.9.221",
"gatsby-link": "^1.6.38",

@cyrilepinat Oh okay, I also switched to hash parameter, for now, and it seems to work for my use case. Thanks

[dlbnco]

I have the same problem, but just on production builds. Nothing happens when navigateTo is fired, no URL update nor even an error.

Edit: ended up I was wrong and actually navigateTo wasn't being fired, sorry. I fixed my code and it now works well with hash string. Didn't test again with query string though.

[vinaypuppal]

@blazeu and @dalbinaco The issue I mentioned in this comment seems to be solved in the latest version i.e

"gatsby": "1.9.223"

[KyleAMathews]

@vinaypuppal yup! Thanks for testing & confirming it's working! :-)

[yong-zong-dev]

Hi
I just saw this was the communication for a long time. btw, above problem is solved?
for example: "/resources?type=webinar" like this link is available?

In my case it is working well on local (localhost:8000) and build && serve (localhost:9000).
but If I deploy the project to live server then it is not working.

"/resources?type=webinar"
If I force reload above page then at the first it is removing "?type=webinar" and load with only "/resources"

Could anyone help me for this problem?

then very thanks :)

[ankitv-sdei]

use hash "/resources/#?type=webinar"