Did you know that you can store your Gatsby GraphQL fragments in their own files rather than defining them all in some top-level component? Until recently, neither did I.

In order for a GraphQL fragment to be accessible by Gatsby pages, templates, and components, it generally needs to live in some parent or wrapper component. Usually, this is something like your site's PageWrapper.jsx or Layout.jsx component.

The problem

In practice, this leads to a large collection of fragments in that file, where a single syntax error can cause your gatsby develop to fail and require a restart. Not only is this extremely annoying, but a growing list of fragments means a larger and more unwieldy wrapper component.

The solution

Instead, it's a good idea to store each fragment in its own file instead. This is not a well-documented Gatsby feature, so thanks to howchooer Ryan for pointing this out to me!

tl;dr;