Gatsby: Page specific partials?

[jarodtaylor]

Description

More of a Question, I think.

How can we use page-specific "partials" to break your page code up? I know that we have the components directory, but I prefer to keep that to more globally shared components (e.g. <Button>, <Article>, etc.).

My index page has a LOT of sections and I'd prefer not to dump it all in one file.

I was hoping to do something like this:

pages/
  home/
    index.jsx
    partialName.jsx
    partial2Name.jsx
  index.jsx (exports home)

This works, but it also still creates indices for all of the jsx files in the home directory.

Is there a config where I can exclude that directory, or is there a better approach to this? I suppose I could create a partials directory, but I was really hoping to keep these files together with their given page (home, about, contact, etc).

[pieh]

If you prepend partial names with _ underscore ( _partialName.jsx) gatsby won't create pages for them

[jquense]

I wonder if we should revisit that convention for v2? It's a bit out of place in a react component world, but maybe it's reassuring or intuitive for folks coming form a different static site generator?

[jarodtaylor]

Thanks, @pieh! Not my favorite, but at least it works.

[KyleAMathews]

@jquense what are you thinking? Only make pages from index.js components?

[KyleAMathews]

Or perhaps in subdirectories of pages, only make pages from index.js — I do really like doing src/pages/index.js, src/pages/about.js, etc.

[jquense]

I was just thinking treat all files regardless of underscores as pages and move "partials" to /components , partial is a werid concept in a component world yeah?

[jquense]

By "all" I mean all in pages/

[jarodtaylor]

I think partials still have a place in the component world. The nomenclature may be weird, I agree, but I tend to build React with two types of components:

1. Shared components that are usually part of a documented component library.

2. View level components that are typically only shared (if at all) on a given screen, or feature.

[jquense]

sure :) I think that's often a good distinction and valid approach, do the view components tho need to live in the pages directory? You could achieve the distinction you want with a components/ and views/ directories, which you can do already, since Gatsby really only has an opinion about the pages/ one

[jarodtaylor]

Yeah, I guess it could be done that way, but I just think it's strange to have your views separate from your pages, when really, in Gatsby, your views _are_ your pages.

It is what it is. React doesn't have opinions, but us developers do, and god knows they differ. haha

Thanks for suggestions, though.

[pieh]

@jarodtaylor There is another workaround for you if you don't like prepending file names with underscore (can't blame you ;) ) and want to keep your file structure - you can use onCreatePage and deletePage ( https://www.gatsbyjs.org/docs/creating-and-modifying-pages/#removing-trailing-slashes - adjust if condition to your needs and don't call createPage after deleting page) in your gatsby-node.js

[KyleAMathews]

FWIW, I'm a big fan of large components and long render functions. If when building a page, I'm not reusing a component within the page component with other pages, I just keep it within the render function. If I need it elsewhere, I then refactor it out to the components directory. This tends to be a lot less work than trying to prematurely extract out abstractions (i.e. new components).

[jarodtaylor]

@KyleAMathews I wish I could do that. My OCD/ADHD takes over. It's probably from my Ruby On Rails days. haha

[KyleAMathews]

@jquense yeah, the underscore thing is a holdover from v0. I doubt it's used much and yeah, it's an odd pattern. I'll put up an issue asking if anyone cares if we remove it from v2.

[KyleAMathews]

Posted issue https://github.com/gatsbyjs/gatsby/issues/4674