gatsby-plugin-use-query-params broke with use-query-params 2.0.0

rra commented 2 years ago

A very simple use of this plugin with use-query-params now fails during the Gatsby build with:

/home/eagle/lsst/gafaelfawr/ui/node_modules/yoga-layout-prebuilt/yoga-layout/build/Release/nbind.js:53
        throw ex;
        ^

TypeError: Cannot read properties of undefined (reading 'search')
    at useQueryParams_useQueryParams (/home/eagle/lsst/gafaelfawr/ui/.cache/page-ssr/routes/webpack:/gafaelfawr/node_modules/use-query-params/dist/useQueryParams.js:32:1)

This appears to be due to the changes to the adapter setup in the new use-query-params.

squashimodo commented 2 years ago

A very simple use of this plugin with use-query-params now fails during the Gatsby build with:
/home/eagle/lsst/gafaelfawr/ui/node_modules/yoga-layout-prebuilt/yoga-layout/build/Release/nbind.js:53
        throw ex;
        ^

TypeError: Cannot read properties of undefined (reading 'search')
    at useQueryParams_useQueryParams (/home/eagle/lsst/gafaelfawr/ui/.cache/page-ssr/routes/webpack:/gafaelfawr/node_modules/use-query-params/dist/useQueryParams.js:32:1)
This appears to be due to the changes to the adapter setup in the new use-query-params.

I have solved this by creating a custom adapter and passing it to <QueryParamsProvider> wrapped around the root in gatsby-browser & gatsby-ssr

import { globalHistory } from '@reach/router';
import { useState } from 'react';
import {
  PartialLocation,
  QueryParamAdapterComponent,
  QueryParamAdapter,
} from 'use-query-params';
import { navigate } from 'gatsby';

export const GatsbyAdapter: QueryParamAdapterComponent = ({ children }) => {
  const [adapter] = useState<QueryParamAdapter>(() => ({
    get location() {
      return globalHistory.location;
    },
    push(location: PartialLocation) {
      navigate(location.search || '?', { replace: false });
    },
    replace(location: PartialLocation) {
      navigate(location.search || '?', { replace: true });
    },
  }));

  return children(adapter);
};

It requiresenableBatching to be set in the Provider also.

xSyki commented 2 years ago

@alexluong Hi, Do you plan to update and support use-query-params v2?

alexluong / gatsby-packages

gatsby-plugin-use-query-params broke with use-query-params 2.0.0 #46