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

gatsby/packages/gatsby/cache-dir/loader.js

Line 251 in 943842a

console.log(`A page wasn't found for "${path}"`)

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

[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

gatsby/packages/gatsby/cache-dir/component-renderer.js

Line 67 in 3ffe266

this.state.pageResources.component !== nextState.pageResources.component

[cyrilepinat]

I tried this. Not sure there is no regression but all tests are green. What do you think ?
#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 😃 as a workaround so maybe it was not fix you're right.

[blazeu]

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