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: README.md
+24-24Lines changed: 24 additions & 24 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -61,11 +61,11 @@ The second problem solved by FraQL is the mocking. Generating a set of data for
61
61
62
62
### Reference fragments into components
63
63
64
-
FraQL exports a default tag function that is a drop-in replacement for `graphql-tag`. By using it you can create easily reusable fragments.
64
+
FraQL exports a default tag function that is a drop-in replacement for `graphql-tag`. By using it you can create reusable fragments easily.
65
65
66
-
FraQL is not a framework, but it is recommended create a static property `fragments` on your components that contains a map of properties. For each one, you can specify the associated fragment.
66
+
FraQL is not a framework, but it comes with good practices. It is recommended to create a static property `fragments` on your components that contains a map of component properties. For each one, you specify the associated fragment.
67
67
68
-
You may have noticed that the fragment uses "\_" as name. FraQL transforms your fragment into an inline fragment, the name is just dropped, using "\_" is just a convention.
68
+
You may have noticed that the name of the fragment is "\_". FraQL transforms your fragment into an inline fragment. You can pick any name you want, because it will be dropped the transformation anyway.
// Create a map of fragments and reference them on a static property "fragments"
81
+
// Create a map of fragments and reference them on a static property "fragments".
82
82
ArticleCard.fragments= {
83
83
article:gql`
84
84
fragment_onArticle {
@@ -93,9 +93,9 @@ export default ArticleCard
93
93
94
94
### Use fragments into your queries
95
95
96
-
With FraQL, using a fragment into a query is natural, the only thing to do it to reference it at the place you want to use it.
96
+
With FraQL, using a fragment into a query is obvious, just put the fragment where you want to use it.
97
97
98
-
Importing `gql` from `fraql` is not require for building query. In this case this is just a pass-throught to `graphql-tag`. The magic behind FraQL only happens when you use it on a fragment.
98
+
Importing `gql` from `fraql` is not required for queries. In this case this is just a pass-through to `graphql-tag`. The magic behind FraQL only happens when you use it on a fragment.
99
99
100
100
```js
101
101
importReactfrom'react'
@@ -135,18 +135,18 @@ export default ArticleList
135
135
136
136
## Mocking
137
137
138
-
Tools like [StoryBook](https://github.com/storybooks/storybook)permits you to develop your components into an isolated environment. But you still have to generate a set of data for displaying your components. Maintaining this set of datais a pain.
138
+
Tools like [StoryBook](https://github.com/storybooks/storybook)allows you to develop your components into an isolated environment. But you still have to write a set of data for displaying your components. Each time you modify your component, you have to modify this set of data, it is a real pain to maintain!
139
139
140
140
If all your components have fragments, you get mocking for free!
141
141
142
142
#### 1. Generate introspection
143
143
144
-
Mocking data from a fragment requires to know all schema types. You have to generate a introspection result from your schema in order to use mocking.
144
+
Mocking data from a fragment requires knowing all schema types. That's why you have to generate a introspection result from your schema in order to use mocking.
145
145
146
-
FraQL exposes a method `introspectSchema` to simplify this operation. The only thing you have to do is creating a script that dump your introspection result into a JSON file.
146
+
FraQL exposes a method `introspectSchema` to simplify this operation. The only thing you have to do is create a script that dumps your introspection result into a JSON file.
147
147
148
148
```js
149
-
// Example of script that generate an introspection result into "schema.json"
149
+
// Example of script that generates an introspection result into "schema.json".
One of the principle of React is component composition. It is recommended to do the same with your GraphQL fragments. FraQL makes it easy:
223
+
One of the principles of React is component composition. It is recommended to do the same with your GraphQL fragments.
224
224
225
225
```js
226
226
// ArticleTitle.js
@@ -267,9 +267,9 @@ export default ArticleCard
267
267
268
268
### Use without `gql`
269
269
270
-
FraQL offers a drop-in replacement for `graphql-tag` but sometimes you don't want to use `gql` to define your fragments. As mentioned in [graphql-tag documentation](https://github.com/apollographql/graphql-tag) there is a lot of other ways to do it (using Babel, Webpack, etc..).
270
+
FraQL offers a drop-in replacement for `graphql-tag` but sometimes you don't use `gql` to define your fragments. As mentioned in [graphql-tag documentation](https://github.com/apollographql/graphql-tag) there are lots of other ways to do it (using Babel, Webpack, etc..).
271
271
272
-
FraQL exposes a function `toInlineFragment`, this function transforms a GraphQL fragment into an inline fragment.
272
+
FraQL exposes a function `toInlineFragment`, it transforms a GraphQL fragment into an inline fragment.
273
273
274
274
```js
275
275
import { toInlineFragment } from'fraql'
@@ -289,9 +289,9 @@ const query = gql`
289
289
290
290
### Mix named and inline fragments
291
291
292
-
Sometimes you may want to have the best of the two world, use a name fragment in one query and a inline fragment in another.
292
+
Sometimes you may want to have the best of the two worlds, use a name fragment in one query and an inline fragment in another.
293
293
294
-
For this specific use-case FraQL exposes the original document:
294
+
For this specific use-case, FraQL exposes the original document:
295
295
296
296
```js
297
297
importgqlfrom'fraql'
@@ -316,7 +316,7 @@ const query = gql`
316
316
317
317
### Use custom mocks
318
318
319
-
Mocking feature of FraQL is build on top of [grapql-tools](https://www.apollographql.com/docs/graphql-tools/), it means you can [customize all mocks](https://www.apollographql.com/docs/graphql-tools/mocking.html#Customizing-mocks).
319
+
Mocking feature of FraQL is build on top of [grapql-tools](https://www.apollographql.com/docs/graphql-tools/), it means you can [customize all your mocks](https://www.apollographql.com/docs/graphql-tools/mocking.html#Customizing-mocks).
320
320
321
321
You can define global mocks when you create the mocker:
0 commit comments