navigate() function load the url but the page is not refreshed on mobile

[developer0116]

the current url is "/abc/?tag=a" and I navigated it to "abc/?tag=b". But the url on the browser is changed, but the page is not refreshed on mobile.

Look forward to your support.

Best

[sidharthachatterjee]

@developer0116 This doesn't sound Gatsby specific. Could you provide more details or possibly a minimal reproduction?

[hayatae]

This appears to be a regression somewhere between gatsby 2.24.63 and 2.24.73 dealing with navigation changing only the search parameter. This applies to all browsers as far as I've seen and is not mobile specific.

On version 63, calling navigate('?p=42', { replace: true }) updates the URL search parameter and causes a component re-render. Inside the render, accessing either location.search (via gatsby's passed in location) or window.location.search shows the expected value of ?p=42

After updating to version 73, making that exact same call in the exact same way (no code changes at all), the page re-renders, but accessing location.search (via either method) returns the previous URL search value, not the newly updated one. Further calls to navigate continue to update the URL in the browser, but no further component re-renders are invoked. I'll try to put together a minimal reproduction for this.

[hayatae]

Minimal reproduction repo: https://github.com/hayatae/gatsby-search-param-bug

Steps to reproduce:

1. Run npm run develop
2. Open the page, click on the buttons to change the search param - observe no updates

See it work in an older version of gatsby:

1. Run npm install gatsby@2.24.63
2. Run npm run develop
3. Open the page, click the buttons, see everything update as expected when the URL changes

[doscio]

I have the same issue when i recall the same page with a different state: navigate('/page', { state: { newState }}).

The problem appear after upgrading gatsby to version 2.24.70, older versions work without problems.

[wardpeet]

Sorry to hear you're running into an issue. To help us best begin debugging the underlying cause, it is incredibly helpful if you're able to create a minimal reproduction. This is a simplified example of the issue that makes it clear and obvious what the issue is and how we can begin to debug it.

If you're up for it, we'd very much appreciate if you could provide a minimal reproduction and we'll be able to take another look.

Thanks for using Gatsby! 💜

[doscio]

Hi @wardpeet, i've created a minimal reproduction that show the problem.

https://github.com/doscio/gatsby-navigate-issue

The index page has a button that navigate to /counter page. On that page, everytime the button Increase counter is pressed, the counter should increase it's value, but this is not appening on gatsby version 2.24.79.

Versions prior to 2.24.70 works without problem:

1. Run npm install gatsby@2.24.69
2. Run gatsby develop

Everytime I click Increase counter the counter is updating correctly.

[hayatae]

@doscio @wardpeet I've already created a minimal reproduction and posted it in the comments above: https://github.com/gatsbyjs/gatsby/issues/27020#issuecomment-706850931

You can very easily modify this same reproduction to reproduce the same issue with state not updating. Basically, no navigate functions work correctly for refreshing any query or state params on the same route after version 2.24.70.

[LekoArts]

Fixed by https://github.com/gatsbyjs/gatsby/pull/27594

Please install gatsby@2.24.85 and it should work again.

[AidenFaulconer]

This issue is still not fixed, in my app when I programmatically call navigate() from my global store, it updates the URL but does nothing to update the page, it only updates the page when I manually refresh it. Heres my gatsby info

System: OS: Windows 10 10.0.22000
CPU: (12) x64 Intel(R)
Core(TM) i7-8700K CPU @ 3.70GHz Binaries: Node: 14.15.0 - C:\Program
Files\nodejs\node.EXE Yarn: 1.22.17 - C:\Program
Files\nodejs\yarn.CMD npm: 6.14.8 - C:\Program
Files\nodejs\npm.CMD Languages: Python: 3.10.1 - /c/Users/Aiden Faulconer/AppData/Local/Programs /Python/Python310/python
Browsers: Edge: Spartan (44.22000.12), Chromium (99.0.1150.3) npmPackages: gatsby: ^4.7.2 => 4.8.0
gatsby-image: ^3.3.0 =>
3.11.0 gatsby-link: ^4.7.1 => 4.8.0

gatsby-parallel-runner:     

^1.3.0 => 1.3.0 gatsby-plugin-brotli: ^2.1.0 => 2.1.0 gatsby-plugin-catch-links:
^4.7.0 => 4.8.0 gatsby-plugin-direct-import: ^1.0.0 => 1.0.0 gatsby-plugin-emotion:
^7.8.0 => 7.8.0 gatsby-plugin-feed: ^4.7.0
=> 4.8.0 gatsby-plugin-force-trailing -slashes: ^1.0.5 => 1.0.5

gatsby-plugin-google-analytics: ^4.7.0 => 4.8.0 gatsby-plugin-image: ^2.2.0 => 2.8.0 gatsby-plugin-jss: ^4.7.0 => 4.8.0 gatsby-plugin-layout: ^3.7.0 => 3.8.0 gatsby-plugin-manifest:
^4.7.0 => 4.8.0 gatsby-plugin-minify-html:
^1.0.4 => 1.0.4 gatsby-plugin-netlify:
^4.1.0 => 4.1.0 gatsby-plugin-netlify-cache: ^2.0.0 => 2.0.0 gatsby-plugin-netlify-cms:
^6.3.0 => 6.8.0 gatsby-plugin-offline:
^5.7.0 => 5.8.0 gatsby-plugin-perf-budgets: 0.0.18 => 0.0.18 gatsby-plugin-preload-fonts: ^3.7.0 => 3.8.0 gatsby-plugin-purgecss:
^6.1.0 => 6.1.0 gatsby-plugin-react-helmet: ^5.7.0 => 5.8.0 gatsby-plugin-remove-trailin g-slashes: ^4.7.0 => 4.8.0
gatsby-plugin-sass: ^5.7.0
=> 5.8.0 gatsby-plugin-scroll-reveal: 0.0.7 => 0.0.7

gatsby-plugin-scss-typescript:
^5.1.0 => 5.1.0 gatsby-plugin-sharp: ^4.7.0 => 4.8.0 gatsby-plugin-webpack-bundle -analyser-v2: ^1.1.25 => 1.1.26 gatsby-plugin-webpack-size: ^2.0.1 => 2.0.1

gatsby-remark-copy-linked-files: ^5.7.0 => 5.8.0 gatsby-remark-custom-blocks: ^4.7.0 => 4.8.0 gatsby-remark-emojis: 0.4.3 => 0.4.3 gatsby-remark-images: ^6.7.0 => 6.8.0 gatsby-remark-prismjs:
^6.7.0 => 6.8.0

gatsby-remark-responsive-iframe: ^5.7.0 => 5.8.0 gatsby-source-filesystem:
^4.7.0 => 4.8.0 gatsby-theme-material-ui:
^5.1.0 => 5.1.0 gatsby-transformer-remark:
^5.7.0 => 5.8.0 gatsby-transformer-sharp:
^4.7.0 => 4.8.0 npmGlobalPackages: gatsby-cli: 4.7.0