Gatsby: Version 2.24.70 Breaks How location.search Gets Updated

[adonig]

Description

Starting with version 2.24.70 my website's search field stopped working.

Steps to reproduce

1. Checkout the minimal reproduction
2. Run yarn install && yarn run develop
3. Open http://localhost:8000/ in the browser and try the search field. Note that it does work.
4. Change "<2.24.70" in package.json to "^2.24.70"
5. Run yarn install && yarn run develop
6. Open http://localhost:8000/ in the browser and try the search field. Note that it does not work.

It looks like since 2.24.70 the changes to location.search don't cause the useEffect hook to execute.

  useEffect(() => {
    const newSearchQuery = new URLSearchParams(location.search).get(`q`) || ``
    setSearchQuery(newSearchQuery)
    if (newSearchQuery) {
      updateResults(newSearchQuery)
    }
  }, [location.search])

Expected result

The useEffect hook should run. The website should display the search results.

Actual result

It doesn't.

Environment

  System:
    OS: macOS 10.15.6
    CPU: (8) x64 Intel(R) Core(TM) i7-8559U CPU @ 2.70GHz
    Shell: 5.0.18 - /usr/local/bin/bash
  Binaries:
    Node: 14.8.0 - ~/.nvm/versions/node/v14.8.0/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 6.14.7 - ~/.nvm/versions/node/v14.8.0/bin/npm
  Languages:
    Python: 2.7.17 - /Users/asd/.pyenv/shims/python
  Browsers:
    Chrome: 86.0.4240.75
    Firefox: 81.0.1
    Safari: 14.0
  npmPackages:
    gatsby: ^2.24.70 => 2.24.72 

[vladar]

I reproduced this locally. Probably caused by this: https://github.com/gatsbyjs/gatsby/pull/27261#discussion_r502425108

[AndrewNatoli]

'ello! I have another example of this if it would help to have another reference. :)

A project you can clone + run locally (by default runs latest Gatsby and therefore the [[wiki-links]] do not work):

• Site: https://andrewnatoli.github.io/gatsby-garden-theme-example
• Repo: https://github.com/AndrewNatoli/gatsby-garden-theme-example

It's based off this project and you can see an example built with <2.24.70 here: https://github.com/mathieudutour/gatsby-digital-garden

If you put a breakpoint where stackedPagesSlugs is declared in react-stacked-pages-hook/hooks.tsx you'll find that it fires after clicking a [[wiki-link]] (due to the updated location) on the pre-2.24.70 example, but not the example I provided.

[WillMayger]

👋 Hi @vladar I am happy to pick this one up as it was my PR that seemed to cause it.

Just to double check my understanding though - the location search is currently not effecting the navigation when it should be because in the navigation we are using pathname as the comparison when we should be using the search query as well?

[vladar]

Hey @WillMayger ! That would be awesome! 💜

So yeah, I think the issue is that we should update on any location string change (so pathname+search+hash). The reproduction in this issue should help to understand if it was fixed for the search part. But keep in mind that we should also cover the hash case, not just pathname and search.

[WillMayger]

👍 Brilliant thanks for the info, I will get started on a PR this weekend!

[WillMayger]

👋 Hi Everyone, sorry I didn't manage to get round to it last weekend.

Please can I get a review on my PR which contains tests & a fix for this issue: https://github.com/gatsbyjs/gatsby/pull/27594

Thanks

[vladar]

Thanks again! Published in [email protected]

[adonig]

@vladar @WillMayger It works like a charm. Thank you very much.