You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/docs/querying-with-graphql.md
+9-10Lines changed: 9 additions & 10 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -207,10 +207,10 @@ Notice that in the above example for [querying images](#images), we used `...Gat
207
207
208
208
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.
209
209
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:
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.
237
237
238
-
```jsx{14-17,31-34}
238
+
```jsx
239
239
// src/pages/index.jsx
240
240
241
241
import React from "react";
@@ -284,14 +284,13 @@ If the index component becomes too large, you might want to refactor it into sma
284
284
285
285
import React from "react";
286
286
287
-
export default ({ frontmatter: { title, date }}) => (
287
+
export default ({ frontmatter: { title, date }}) => (
288
288
<div>
289
289
<h3>
290
-
{title}{" "}
291
-
<span>— {date}</span>
290
+
{title} <span>— {date}</span>
292
291
</h3>
293
292
</div>
294
-
)
293
+
);
295
294
296
295
export const query = graphql`
297
296
fragment IndexPostFragment on MarkdownRemark {
@@ -305,7 +304,7 @@ export const query = graphql`
305
304
306
305
Now, we can use the component together with the exported fragment in our index page.
0 commit comments