Skip to content

Commit

Permalink
Target docusaurus docs instead of the old ones in the template/README.md
Browse files Browse the repository at this point in the history
Signed-off-by: petetnt <pete.a.nykanen@gmail.com>
  • Loading branch information
petetnt committed Oct 23, 2018
1 parent 787a4a7 commit 36353be
Show file tree
Hide file tree
Showing 3 changed files with 65 additions and 0 deletions.
60 changes: 60 additions & 0 deletions docusaurus/docs/loading-graphql-files.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
---
id: loading-graphql-files
title: Loading .graphql Files
sidebar_label: Loading .graphql Files
---

You can load `.gql` and `.graphql` files by using [`babel-plugin-macros`](https://github.com/kentcdodds/babel-plugin-macros) included with Create React App.

To load the files, first install the [`graphl-tag.macro`](https://www.npmjs.com/package/graphql-tag.macro) package by running

```sh
npm install --save-dev graphl-tag.macro
```

Alternatively you may use `yarn`:

```sh
yarn add --dev graphql-tag.macro
```

Then, whenever you want to load `.gql` or `.graphql` files, import the `loader` from the macro package:

```js
import { loader } from 'graphql.macro';

const query = loader('./foo.graphql');
```

And your results get automatically inlined! This means that if the file above, `foo.graphql`, contains the following:

```graphql
gql`
query {
hello {
world
}
}
`;
```

The previous example turns into:

```javascript
const query = {
'kind': 'Document',
'definitions': [{
...
}],
'loc': {
...
'source': {
'body': '\\\\n query {\\\\n hello {\\\\n world\\\\n }\\\\n }\\\\n',
'name': 'GraphQL request',
...
}
}
};
```

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.
4 changes: 4 additions & 0 deletions docusaurus/website/i18n/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -94,6 +94,10 @@
"title": "Integrating with an API Backend",
"sidebar_label": "Integrating with an API"
},
"loading-graphql-files": {
"title": "Loading .graphql Files",
"sidebar_label": "Loading .graphql Files"
},
"making-a-progressive-web-app": {
"title": "Making a Progressive Web App"
},
Expand Down
1 change: 1 addition & 0 deletions docusaurus/website/sidebars.json
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@
"adding-a-sass-stylesheet",
"post-processing-css",
"adding-images-fonts-and-files",
"loading-graphql-files",
"using-the-public-folder",
"code-splitting"
],
Expand Down

0 comments on commit 36353be

Please sign in to comment.