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
I also think it could be cool to explain just a few use cases that answer this question: "Why is GraphQL so cool?"
I also expected to see code examples for image stuff. Also, a random thing about colons that I learned last year is this:
a full sentence must precede the colon :)
Copy file name to clipboardExpand all lines: docs/docs/querying-with-graphql.md
+17-18Lines changed: 17 additions & 18 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -16,7 +16,7 @@ to you.
16
16
17
17
Gatsby uses GraphQL to enable [page and layout
18
18
components](/docs/building-with-components/) to declare what data they and their
19
-
sub-components need. Gatsby then handles making sure that data is available in
19
+
sub-components need. Then, Gatsby makes that data available in
20
20
the browser when needed by your components.
21
21
22
22
## What does a GraphQL query look like?
@@ -33,7 +33,7 @@ GraphQL lets you ask for the exact data you need. Queries look like JSON:
33
33
}
34
34
```
35
35
36
-
Which returns:
36
+
Which returns this:
37
37
38
38
```json
39
39
{
@@ -69,12 +69,12 @@ export const query = graphql`
69
69
```
70
70
71
71
The result of the query is automatically inserted into your React component
72
-
on the `data` prop. GraphQL and Gatsby lets you ask for data and then
72
+
on the `data` prop. GraphQL and Gatsby let you ask for data and then
73
73
immediately start using it.
74
74
75
75
## How to learn GraphQL
76
76
77
-
Gatsby might be the first time you've seen GraphQL! We hope you love it as much
77
+
Your experience developing with Gatsby might be the first time you've seen GraphQL! We hope you love it as much
78
78
as we do and find it useful for all your projects.
79
79
80
80
When starting out with GraphQL, we recommend the following two tutorials:
@@ -84,18 +84,18 @@ When starting out with GraphQL, we recommend the following two tutorials:
84
84
85
85
[The official Gatsby tutorial](/tutorial/part-four/) also includes an introduction to using GraphQL specifically with Gatsby.
86
86
87
-
## How does GraphQL and Gatsby work together?
87
+
## How do GraphQL and Gatsby work together?
88
88
89
89
One of the great things about GraphQL is how flexible it is. People use GraphQL
90
90
with [many different programming languages](http://graphql.org/code/) and for web and native apps.
91
91
92
-
Most people using GraphQL run it on a server to respond live to requests for
92
+
Most people run GraphQL on a server to respond live to requests for
93
93
data from clients. You define a schema (a schema is a formal way of describing
94
94
the shape of your data) for your GraphQL server and then your GraphQL resolvers
95
95
retrieve data from databases and/or other APIs.
96
96
97
-
Gatsby is unique that it uses GraphQL at _build-time_ and _not_ for live
98
-
sites. This means you don't need to run additional services (e.g. a database
97
+
Gatsby uses GraphQL at _build-time_ and _not_ for live
98
+
sites. Thisis unique, and it means you don't need to run additional services (e.g. a database
99
99
and node.js service) to use GraphQL for production websites.
100
100
101
101
Gatsby is a great framework for building apps so it's possible and encouraged
@@ -106,18 +106,18 @@ a live GraphQL server from the browser.
106
106
107
107
Most usages of GraphQL involve manually creating a GraphQL schema.
108
108
109
-
With Gatsby, we instead use plugins which fetch data from different sources
110
-
which we use to automatically _infer_ a GraphQL schema.
109
+
With Gatsby, we use plugins which fetch data from different sources. We use that data from different sources
110
+
to automatically _infer_ a GraphQL schema.
111
111
112
-
If you give Gatsby data that looks like:
112
+
If you give Gatsby data that looks likethis:
113
113
114
114
```json
115
115
{
116
116
"title": "A long long time ago"
117
117
}
118
118
```
119
119
120
-
Gatsby will create a schema that looks something like:
120
+
Gatsby will create a schema that looks something like this:
121
121
122
122
```
123
123
title: String
@@ -126,17 +126,16 @@ title: String
126
126
This makes it easy to pull data from anywhere and immediately start writing
127
127
GraphQL queries against your data.
128
128
129
-
This _can_ cause confusion though as some data sources allow you to define
130
-
a schema but parts of that schema might still not be recreated in Gatsby if
131
-
there's not yet any data added for that part of the schema.
129
+
This _can_ cause confusion as some data sources allow you to define
130
+
a schema even when there's not any data added for parts or all of the schema. If parts of the data haven't been added, then those parts of the schema might not be recreated in Gatsby.
132
131
133
132
## Powerful data transformations
134
133
135
-
GraphQL enables another unique feature of Gatsby — it lets you control data transformations with arguments to your queries. Some examples.
134
+
GraphQL enables another unique feature of Gatsby — it lets you control data transformations witharguments to your queries. Some examples follow.
136
135
137
136
### Formatting dates
138
137
139
-
People often store dates like "2018-01-05" but want to display the date in some other form like "January 5th, 2018". One way of doing this is to load a dateformatting JavaScript library into the browser. With Gatsby's GraphQL layer you can instead do the formatting at querytime like:
138
+
People often store dates like "2018-01-05" but want to display the date in some other form like "January 5th, 2018". One way of doing this is to load a date-formatting JavaScript library into the browser. Or, withGatsby's GraphQL layer, you can do the formatting at query-time like:
140
139
141
140
```graphql
142
141
{
@@ -146,7 +145,7 @@ People often store dates like "2018-01-05" but want to display the date in some
146
145
147
146
### Markdown
148
147
149
-
Gatsby has _transformer_ plugins which can transform data from one form to another. A common example is markdown. If you install [`gatsby-transformer-remark`](/packages/gatsby-transformer-remark/) then in your queries, you can specify you want the transformed HTML version instead of markdown:
148
+
Gatsby has _transformer_ plugins which can transform data from one form to another. A common example is markdown. If you install [`gatsby-transformer-remark`](/packages/gatsby-transformer-remark/), then in your queries, you can specify you want the transformed HTML version instead of markdown:
0 commit comments