Skip to content

Commit 2541e9a

Browse files
committed
Tweak language
1 parent ae6b958 commit 2541e9a

File tree

1 file changed

+9
-10
lines changed

1 file changed

+9
-10
lines changed

docs/docs/querying-with-graphql.md

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -207,10 +207,10 @@ Notice that in the above example for [querying images](#images), we used `...Gat
207207
208208
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.
209209
210-
For example, I can put all of my helper fragments in `src/fragments/index.js`:
210+
For example if I put a fragment in a helper component, I can use that fragment in any other query:
211211
212212
```jsx
213-
// src/fragments/index.js
213+
// src/components/PostItem.js
214214
215215
export const markdownFrontmatterFragment = graphql`
216216
fragment MarkdownFrontmatter on MarkdownRemark {
@@ -228,14 +228,14 @@ They can then be used in any GraphQL query after that!
228228
```graphql
229229
query PostByPath($path: String!) {
230230
markdownRemark(frontmatter: { path: { eq: $path } }) {
231-
... MarkdownFrontmatter
231+
...MarkdownFrontmatter
232232
}
233233
}
234234
```
235235
236-
It’s good practice for your helper components to define and export a fragment for the data they need though. For example, on your index page might map over all of your posts to show them in a list.
236+
It’s good practice for your helper components to define and export a fragment for the data they need. For example, on your index page might map over all of your posts to show them in a list.
237237
238-
```jsx{14-17,31-34}
238+
```jsx
239239
// src/pages/index.jsx
240240
241241
import React from "react";
@@ -284,14 +284,13 @@ If the index component becomes too large, you might want to refactor it into sma
284284
285285
import React from "react";
286286
287-
export default ({ frontmatter: { title, date }}) => (
287+
export default ({ frontmatter: { title, date } }) => (
288288
<div>
289289
<h3>
290-
{title}{" "}
291-
<span>— {date}</span>
290+
{title} <span>— {date}</span>
292291
</h3>
293292
</div>
294-
)
293+
);
295294
296295
export const query = graphql`
297296
fragment IndexPostFragment on MarkdownRemark {
@@ -305,7 +304,7 @@ export const query = graphql`
305304
306305
Now, we can use the component together with the exported fragment in our index page.
307306
308-
```jsx{15}
307+
```jsx{28}
309308
// src/pages/index.jsx
310309
311310
import React from "react";

0 commit comments

Comments
 (0)