See what's launched

The next gen Gatsby is here Performance, developer velocity, and scaling to meet Enterprise needs - See what’s launched

Sign Up for Free
Community Plugin
View plugin on GitHub


Drop in support for use-query-params

Table of Contents


npm install use-query-params gatsby-plugin-use-query-params


1. Register plugin

In gatsby-config.js:

module.exports = {
  plugins: [


2. Use use-query-params package as usual. Here is its documentation.

import React from "react";
import { useQueryParam, NumberParam, StringParam } from "use-query-params";

const UseQueryParamExample = () => {
  // something like: ?x=123&foo=bar in the URL
  const [num, setNum] = useQueryParam("x", NumberParam);
  const [foo, setFoo] = useQueryParam("foo", StringParam);

  return (
      <h1>num is {num}</h1>
      <button onClick={() => setNum(Math.random())}>Change</button>
      <h1>foo is {foo}</h1>
      <button onClick={() => setFoo(`str${Math.random()}`)}>Change</button>

export default UseQueryParamExample;



© 2022 Gatsby, Inc.