Creating client-side page redirect in GatsbyJS without using plugins.

I’ve been working on easy and quick approach to clone or redirect pages in Gatsby. For my surprise there is not out of the box method.

First, there is an action createRedirect which requires additional hosting configuration and a plugin and I’m not a fen polluting my projects with libraries.

After further digging found only deprecated actions APIs.

An easy way to create redirects is with a Meta refresh HTML tag. Be cautious with this approach. There are drawbacks like crashing browser's back button or slowing loading time.

The technique might be a good choice if you have no hosting permissions.

The code snippet that creates the redirection is:

<meta http-equiv="refresh" content=“0;url=http://example.com/“ />

The line makes your page redirect after 0 seconds to example.com. You must put the Meta tag in the Head and in Gatsby you should use the Helmet plugin.

First, we need to create a template which contains the Meta tag. In my templates folder I created a new JavaScript file called redirect-page.js:

import React from 'react';
import Helmet from 'react-helmet';
import { StaticQuery, graphql } from 'gatsby';

export default props => {
  return (
    <StaticQuery
      query={graphql`
        query {
          site {
            siteMetadata {
              siteUrl
            }
          }
        }
      `}
      render={data => {
        return (
          <Helmet>
            <meta
              http-equiv="refresh"
              content={`0;url=${data.site.siteMetadata.siteUrl}${props.pageContext.redirect}`}
            />
          </Helmet>
        );
      }}
    />
  );
};

To create a page, we need two things:

1. Our domain with the http. In my case, I’m using StaticQuery to get the siteMetadata in gatsby-config.js file.
2. The redirection location. I will pass the location as props.

Now we need to implement the logic, in my case I create a file called page-redirect.js in src/utils.

module.exports = redirectPages;

function redirectPages(config, createPage, redirectPageTemplate) {
  return config.forEach(data => {
    createPage({
      path: data.url,
      component: redirectPageTemplate,
      context: {
        redirect: data.redirect
      }
    });
  });
}

Note I’m using ES5 syntax for import/export as Gatsby don’t like mixing ES6 with ES5.

The method redirectPages must have 3 arguments - config, createPage, redirectPageTemplate.

1. config is an array of objects. Every object contains the URL that triggers the redirection and the new page.
2. createPage is Gatsby action we are reusing.
3. redirectPageTemplate is the template with the Meta tag we created.

Finally, we need to activate the redirection in the gatsby-node.js file.

/*
    We need to import our logic
*/
const redirectPages = require('./src/utils/page-redirect');
/*
    in the exports.createPages we create a template constant
*/

exports.createPages = ({ graphql, actions }) => {
    /* create a template const */

    const redirectPageTemplate = path.resolve('./src/templates/redirect-page.js')

    /* */

    return new Promise((resolve) => {
        graphql( /* */ ).then(result => {

            /* */

            redirectPages([
                {url: '/blog/1', redirect: '/blog'},
                {url: '/categories', redirect: '/blog'}
            ], createPage, redirectPageTemplate);

            /* */

In the exports.createPages we create a template constant and run the method redirectPages from page-redirect.js. First argument is an array of objects with keys URL and redirect or the page we want to activate redirection and the new location. The second argument is the action createPage and the last one is the redirect-page.js template.

I found that this technique is the simplest one when you don’t want to use plugins or set a hosting.