Find Out Which Top-Level Component Gatsby Is Using on Any Page

A commercial center map with a big "YOU ARE HERE" marker.

When using Gatsby on a big project with lots of templates, you may eventually not be sure which templates are used for which pages. Here is a quick and simple way to know what’s the top-level component used by any URL.

There’s a good chance you already use gatsby-browser.js and its wrapPageElement API. If not… well you’re about to!

wrapPageElement gets both the current page and all its props. The props object contains information about the current template being used. You will find what you need by logging props.pageResources.page.componentChunkName.

// gatsby-browser.js
export function wrapPageElement({ element, props }) {
  console.log(props.pageResources.page.componentChunkName)

  return (
    // return `element`, with or without a surrounding <Layout>, modifications, props, etc.
  )
}

For a component located at src/templates/events.tsx , props.pageResources.page.componentChunkName will look like this: “component—src-templates-events-tsx”.

So there’s your answer 🎉

Note that props.pageResources.component.name contains the name of the component as it is exported. But I find having the full path more helpful.


Looking for a Slackline!?

Go to SlacklineMTL.com and use the code felix10 for a 10% discount!

      \O 
       |\
      / \
🌳~~~~~~~~~~~~~~~~🌳
          

Pssst!

Sign up to my newsletter and get a free PDF about how to get people to sign up for your newsletters!

Powered by EmailOctopus