How to Use URL Query String Parameters in Gatsby

In Gatsby, leverage Reach Router's useLocation hook along with the query-string package to parse URL query string parameters and use the value to update state.

First, install:

npm install @reach/router query-string

Reach Router is used by Gatsby, but you'll need it in your package.json if linters are in use.

In this example, change the user's selected theme, or expand to any values you need from the URL parameters, available on location.search from the useLocation hook.

import * as React from 'react';

import { useLocation } from '@reach/router';
import queryString from 'query-string';

const getSelectedTheme = (query) => {
  const fallback = 'light';

  if (query) {
    const queriedTheme = queryString.parse(query);
    const { theme } = queriedTheme;

    // Ensure a valid expected value is passed
    if (['light', 'dark'].includes(theme)) {
      return theme;
    }

    return fallback;
  }

  return fallback;
};

const UserTheme = () => {
  const location = useLocation();
  const defaultTheme = (location.search && getSelectedTheme(location.search)) || 'light';
  const [theme, setTheme] = React.useState(defaultTheme);

  // rest of component, maybe creates/updates context, or updates a form setting

};

Available as a gist >

This method is an update to use hooks and a functional component based on the example in the article How to Get Query String Parameter Values in Gatsby by Christopher Fitkin.

Blog

How to Use URL Query String Parameters in Gatsby

Stephanie Eckles

Join Our Newsletter. No Spam, Only the good stuff.

Related