wrapPageElement vs wrapRootElement - Detail Guide - When to Use?

Sometimes it might be confusing which one to use among wrapPageElement and wrapRootElement. In this I will explain you when to use which by keeping it simple.

Use wrapPageElement - Advantages

const React = require("react")
const Layout = require("./src/components/layout").default

exports.wrapPageElement = ({ element, props }) => {
  // props provide same data to Layout as Page element will get
  // including location, data, etc - you don't need to pass it
  return <Layout {...props}>{element}</Layout>

Use wrapRootElement - Advantages

Instantiating store in wrapRootElement handler ensures:

import React from "react";
import { Provider } from "react-redux";

import createStore from "./src/state/createStore";

export const wrapRootElement = ({ element }) => {
  const store = createStore();
  return <Provider store={store}>{element}</Provider>;

It is recommended to use Gatsby’s SSR and Gatsby’s Browser APIs together when you are using wrapRootElement and wrapPageElement

Last Updated on

Next Post: GraphProtocol: TS2322 null assignment in Subgraph →