Skip to content

Commit

Permalink
Document how to create custom fragments
Browse files Browse the repository at this point in the history
  • Loading branch information
jiahaog authored Feb 8, 2018
1 parent f927993 commit 96401d2
Showing 1 changed file with 34 additions and 0 deletions.
34 changes: 34 additions & 0 deletions docs/docs/querying-with-graphql.md
Original file line number Diff line number Diff line change
Expand Up @@ -194,6 +194,40 @@ export const query = graphql`
`;
```
## Advanced
### Fragments
Notice that in the above example for [querying images](#images), we used `...GatsbyImageSharpResolutions`, which is a GraphQL Fragment, a reusable set of fields for query composition. You can read more about them [here](http://graphql.org/learn/queries/#fragments).
If you wish to define your own fragments for use in your application, you can use named exports to export them in any Javascript file, and they will be automatically processed by Gatsby for use in your GraphQL queries.
For example, I can put all of my helper fragments in `src/fragments/index.js`:
```javascript
// src/fragments/index.js
export const markdownFrontmatterFragment = graphql`
fragment MarkdownFrontmatterFragment on MarkdownRemark {
frontmatter {
path
title
date(formatString: "MMMM DD, YYYY")
}
}
`;
```
They can then be used in any GraphQL query after that!
```graphql
query PostByPath($path: String!) {
markdownRemark(frontmatter: { path: { eq: $path } }) {
...MarkdownMetadataFragment
}
}
```
See also the following blog posts:
* [Making Website Building Fun](/blog/2017-10-16-making-website-building-fun/)
Expand Down

0 comments on commit 96401d2

Please sign in to comment.