{"data":{"markdownRemark":{"html":"

You want to use the same query in multiple components. Or maybe you want to use queries outside of pages / layouts. Well, you can't, but you can use fragments!

\n
\n

tl;dr - Use fragments. Export fragments from any component. Use them anywhere.

\n
\n

Sharing queries

\n

You have a blog. You want to have a list of recent posts in the sidebar. That sidebar is a separate component. You can only use queries in pages or layouts. You need to pass data to components from layouts or pages.

\n

You cannot share queries. But you can do something similar with GraphQL fragments.

\n

Introducing fragments

\n

A fragment defines some fields that you want to retrieve from a type. GraphQL organises data according to types. You can start by just using fragments. They will make more sense once you've used them a few times.

\n

For example, if you want the site title, your query might look like this:

\n
query IndexQuery {\n  site {\n    siteMetadata {\n      title\n    }\n  }\n}
\n

You could make this a fragment. Then whenever you need the site title, you use the fragment. Your fragment might look like this:

\n
fragment SiteTitle on Site {\n  siteMetadata {\n    title\n  }\n}
\n

The fragment name is SiteTitle. It's a fragment on the type Site.

\n

Then you could change your query. Now it could look like this:

\n
query IndexQuery {\n  site {\n    ...SiteTitle\n  }\n}
\n

You use fragments with the spread operator .... The effect of this query is exactly the same as the first example. Your site's title will be props.data.site.siteMetadata.title.

\n

Exporting fragments

\n

You can define fragments in any of your components. You just export the fragment as a \"named export\". If you export it, Gatsby will find it. Then you can use it anywhere.

\n
\n

Gatsby searches all your files for fragments first. Then it builds your site. You don't need to think about defining fragments before you use them. Gatsby takes care of that for you. Define anywhere, use anywhere.

\n
\n

Your fragment must follow the export syntax like so:

\n
export const variableName = graphql`\nfragment FragName on TypeName { ... }\n`
\n

The variableName can be anything you want.

\n

Define once, use many

\n

You have one component that you want to use in different places. You must pass the data either from a layout or a page. If you use the same component in multiple pages you will have multiple queries. Those queries must always fetch the same data.

\n

You can define the fragment in the same file as your component. Then use the fragment to fetch the data in your page or layout query. Pass the data from the layout or page to the component.

\n

You want to fetch an extra field. Instead of changing your queries, just change the fragment. Then the data will automatically flow from query to page / layout to your component.

","excerpt":"You want to use the same query in multiple components. Or maybe you want to use queries outside of pages / layouts. Well, you can't, but you…","timeToRead":2,"frontmatter":{"date":"February 27, 2018","path":"/reusable-graphql-queries-in-gatsby","title":"Reusable GraphQL queries in Gatsby"}},"relatedPosts":null,"allCommentsJson":{"edges":[{"node":{"id":"78124f9d-53f8-5eca-be1c-43b1599e3ad7","name":"Kevin McDonald","date":1536205054,"fields":{"messageHtml":"

This post was super helpful. I’ve been hacking around learning gatsby and graphql wondering what the starters where doing with fragments. This post explained it.

"}}}]},"allRatingsJson":{"totalCount":4,"edges":[{"node":{"id":"aebd86ab-4ab7-540c-92a9-2538d78888bc","rating":"5"}},{"node":{"id":"7c680db4-bbef-583a-be8d-db13cf1f63f5","rating":"5"}},{"node":{"id":"75d9868d-46eb-54fc-8bc0-72bf5449aa34","rating":"5"}},{"node":{"id":"f03ac5a5-cf54-544f-9744-3f10b06ebecc","rating":"5"}}]}},"pageContext":{"tags":[]}}