Can this work with Gatsby?

[dante-blitz]

Has anyone successfully used this with gatsby?

I'm trying to get this working but upon running 'gatsby build. I get the following error...

WebpackError: TypeError: Cannot read property 'search' of undefined

I've looked at similar issues but have not found a definitive answer.

[dante-blitz]

https://github.com/pbeshai/use-query-params/issues/13

[dante-blitz]

https://github.com/pbeshai/use-query-params/issues/51

[dante-blitz]

https://github.com/pbeshai/use-query-params/pull/55

[Romcol]

This could help : https://github.com/pbeshai/use-query-params/issues/51#issuecomment-546393827. See if it can help you!

[SimeonGriggs]

Also having this problem.

Whole thing works fine during development but can't get it to build. Same error as the OP.

[SimeonGriggs]

Got this working in Gatsby during Build!

Bring in the Location component where you bring in globalHistory

import {globalHistory, Location} from '@reach/router'

Then wrap the QueryParamProvider and pass in the prop

<Location>
    {({location}) => {
        return (
        <QueryParamProvider location={location} reachHistory={globalHistory}>
            <Layout {...props} />
        </QueryParamProvider>
        )
    }}
</Location>

This worked for me, YMMV.

[davshoward]

Got this working in Gatsby during Build!

Bring in the Location component where you bring in globalHistory

import {globalHistory, Location} from '@reach/router'

Then wrap the QueryParamProvider and pass in the prop

<Location>
    {({location}) => {
        return (
        <QueryParamProvider location={location} reachHistory={globalHistory}>
            <Layout {...props} />
        </QueryParamProvider>
        )
    }}
</Location>

This worked for me, YMMV.

@SimeonGriggs Where are you using this code? In a component or on html.js?

[SimeonGriggs]

Inside a component called LayoutContainer, in /src/containers/layout.js

[davshoward]

Got it working - but each "update" causes the page to scroll to the top - do you have the same issue?

[SimeonGriggs]

Nope. That must be something else.

[alexluong]

Hi folks, I took the liberty to create a plugin for this. It should help you simplify the process of setting this up by just using the plugin. Would be cool if you take a look and see if you can benefit from it!

Here's the package:

gatsby-plugin-use-query-params

[vebjorngronhaug]

@davshoward did you figure out what was causing the scroll to top on update?

[davshoward]

@davshoward did you figure out what was causing the scroll to top on update?

I did not :-(

[alexhillel]

I have the scrolling up to top in Gatsby issue too and can't work out why it's happening... it would be amazing if it didn't do that!

[ThomasJanUta]

This issue can be closed.

Answer to the question is: yes.

How?

• SimeonGriggs comment: https://github.com/pbeshai/use-query-params/issues/56#issuecomment-590488389
• XOR
• alexluong plugin: https://github.com/pbeshai/use-query-params/issues/56#issuecomment-602065657

[louishugens]

Hi,

I'm trying to get rid of this but i can. It sticks even after i uninstalled it. why os? and how to remove it?

[cesarvarela]

This seems to have stopped working with Gatsby 4, every time I use setQuery Gatsby throws a 404 (even when setting the reachHistory prop). I ended up using the navigate function alongside stringify.

[wylee]

This seems to have stopped working with Gatsby 4, every time I use setQuery Gatsby throws a 404 (even when setting the reachHistory prop). I ended up using the navigate function alongside stringify.

I'm having the same issue with Gatsby 4. When running gatsby develop, I get a 404 when setting params, but gatsby build && gatsby serve works.

I'm wondering if there's a way to configure use-query-params to use Gatsby's navigate. Otherwise, it's kind of a non-starter to use this with Gatsby since iterating is so slow (kill server, build, wait..., start server, test, ↩).

Alternatively, maybe something's borked in my Gatsby config that's causing this to happen.

EDIT: I think I found a solution to this issue. This might resolve #98 too:

// gatsby-browser.js
import React from "react";
import { globalHistory, Location } from "@reach/router";
import { QueryParamProvider } from "use-query-params";
import { adaptReachHistory } from "./src/utils/use-query-params";

export const wrapRootElement = ({ element }) => (
    // This is a tweaked version of what gatsby-plugin-use-query-params does
    <Location>
      {({ location }) => (
        <QueryParamProvider
          location={location}
          history={adaptReachHistory(globalHistory)}
        >
          {element}
        </QueryParamProvider>
      )}
    </Location>
);

// src/utils/use-query-params.js
import { navigate } from "gatsby"; // or from gatsby-plugin-react-intl, etc

// Copy of adaptReachHistory from use-query-params/QueryParamProvider
// that uses Gatsby's `navigate` function and relative navigation to
// avoid 404s when running `gatsby develop`.

let cachedReachHistory = undefined;
let cachedAdaptedReachHistory = undefined;

/**
 * Adapt @reach/router history to work with use-query-params' history
 * interface.
 *
 * This version uses Gatsby's `navigate` and relative URLs to avoid
 * 404s.
 *
 * @param history globalHistory from @reach/router
 */
export function adaptReachHistory(history) {
  if (history === cachedReachHistory && cachedAdaptedReachHistory != null) {
    return cachedAdaptedReachHistory;
  }

  const adaptedReachHistory = {
    async push(location) {
      console.log("push state");
      await navigate(location.search || "?", { replace: false });
    },
    async replace(location) {
      await navigate(location.search || "?", { replace: true });
    },
    get location() {
      return history.location;
    },
  };

  cachedReachHistory = history;
  cachedAdaptedReachHistory = adaptedReachHistory;

  return adaptedReachHistory;
}

I'm wondering if it would be possible to pass a navigate function to QueryParamProvider and/or an option to use relative URLs. The former would be useful when you want to use navigate from gatsby-plugin-react-intl (or some other navigate) and the latter might resolve #98 when using the standard Gatsby navigate.

[presto2116]

If anyone gets to this issue like i have, v2 of use-query-params has a reach router adapter.

import { ReachAdapter } from 'use-query-params/adapters/reach';

Makes it very easy to use with gatsby now