Creating a DRY version of gatsby-browser.js gatsby-ssr.js

user_12208525 0
Viewed 342

In my build I have two files with the same code: gatsby-browser.js and gatsby-ssr.js. The code is pretty simple, it uses wrapPageElement to wrap pages in a <Layout /> component:

// gatsby-browser.js  gatsby-ssr.js

import React from 'react';
import Layout from './src/components/Layout';

export function wrapPageElement({ element, props }) {
  return <Layout {...props}>{element}</Layout>;
}

I'd like to hand this code off to one file and then import it into both documents, thereby giving it the DRY treatment, but I'm a bit unsure on the best way of doing this. Can anyone suggest a best practice here?

gatsby reactjs javascript
1 Answers

Create a file named whatever you want (wrapPageElement.js for example, original) with the following content:

const wrapPageElement = ({ element, props }) => {
   return <Layout {...props}>{element}</Layout>;
}
export default wrapPageElement

Now, both in your gatsby-ssr.js and gatsby-browser.js:

import customWrapPageElement from './wrapPageElement' 

export const wrapPageElement = customWrapPageElement

Keep in mind that you will be able to use DRY until certain point, since both files have the same content but it's intended to be like this because both instances have a different effect in Gatsby's environment.

user_55853710
Related