CODEWITHSUNDEEP
javascriptreactjsgatsby
Chrish D
Chrish D

Reputation: 59

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

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?

Upvotes: 2

Views: 608

Answers (1)

Ferran Buireu
Ferran Buireu

Reputation: 29335

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.

Upvotes: 2

Related Questions