Skip to content

Commit 36353be

Browse files
committed
Target docusaurus docs instead of the old ones in the template/README.md
Signed-off-by: petetnt <[email protected]>
1 parent 787a4a7 commit 36353be

File tree

3 files changed

+65
-0
lines changed

3 files changed

+65
-0
lines changed
Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
---
2+
id: loading-graphql-files
3+
title: Loading .graphql Files
4+
sidebar_label: Loading .graphql Files
5+
---
6+
7+
You can load `.gql` and `.graphql` files by using [`babel-plugin-macros`](https://github.com/kentcdodds/babel-plugin-macros) included with Create React App.
8+
9+
To load the files, first install the [`graphl-tag.macro`](https://www.npmjs.com/package/graphql-tag.macro) package by running
10+
11+
```sh
12+
npm install --save-dev graphl-tag.macro
13+
```
14+
15+
Alternatively you may use `yarn`:
16+
17+
```sh
18+
yarn add --dev graphql-tag.macro
19+
```
20+
21+
Then, whenever you want to load `.gql` or `.graphql` files, import the `loader` from the macro package:
22+
23+
```js
24+
import { loader } from 'graphql.macro';
25+
26+
const query = loader('./foo.graphql');
27+
```
28+
29+
And your results get automatically inlined! This means that if the file above, `foo.graphql`, contains the following:
30+
31+
```graphql
32+
gql`
33+
query {
34+
hello {
35+
world
36+
}
37+
}
38+
`;
39+
```
40+
41+
The previous example turns into:
42+
43+
```javascript
44+
const query = {
45+
'kind': 'Document',
46+
'definitions': [{
47+
...
48+
}],
49+
'loc': {
50+
...
51+
'source': {
52+
'body': '\\\\n query {\\\\n hello {\\\\n world\\\\n }\\\\n }\\\\n',
53+
'name': 'GraphQL request',
54+
...
55+
}
56+
}
57+
};
58+
```
59+
60+
You can also use the `gql` template tag the same way you would use the non-macro version from `graphql-tag` package with the added benefit of inlined parsing results.

docusaurus/website/i18n/en.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,10 @@
9494
"title": "Integrating with an API Backend",
9595
"sidebar_label": "Integrating with an API"
9696
},
97+
"loading-graphql-files": {
98+
"title": "Loading .graphql Files",
99+
"sidebar_label": "Loading .graphql Files"
100+
},
97101
"making-a-progressive-web-app": {
98102
"title": "Making a Progressive Web App"
99103
},

docusaurus/website/sidebars.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@
2222
"adding-a-sass-stylesheet",
2323
"post-processing-css",
2424
"adding-images-fonts-and-files",
25+
"loading-graphql-files",
2526
"using-the-public-folder",
2627
"code-splitting"
2728
],

0 commit comments

Comments
 (0)