From 36353be3aec5da9ec8eeaf3ad4852214169c0ec6 Mon Sep 17 00:00:00 2001 From: petetnt Date: Wed, 24 Oct 2018 00:46:24 +0300 Subject: [PATCH 1/7] Target docusaurus docs instead of the old ones in the template/README.md Signed-off-by: petetnt --- docusaurus/docs/loading-graphql-files.md | 60 ++++++++++++++++++++++++ docusaurus/website/i18n/en.json | 4 ++ docusaurus/website/sidebars.json | 1 + 3 files changed, 65 insertions(+) create mode 100644 docusaurus/docs/loading-graphql-files.md diff --git a/docusaurus/docs/loading-graphql-files.md b/docusaurus/docs/loading-graphql-files.md new file mode 100644 index 00000000000..6a61ffb6250 --- /dev/null +++ b/docusaurus/docs/loading-graphql-files.md @@ -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. diff --git a/docusaurus/website/i18n/en.json b/docusaurus/website/i18n/en.json index 5df3cc56344..bef5ea6dcae 100644 --- a/docusaurus/website/i18n/en.json +++ b/docusaurus/website/i18n/en.json @@ -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" }, diff --git a/docusaurus/website/sidebars.json b/docusaurus/website/sidebars.json index 219c14e82ab..7817f45ae93 100644 --- a/docusaurus/website/sidebars.json +++ b/docusaurus/website/sidebars.json @@ -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" ], From 47e6231181eab3a5ff5d4aeb4d16b35a551a2c7c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pete=20Nyk=C3=A4nen?= Date: Wed, 24 Oct 2018 22:51:05 +0300 Subject: [PATCH 2/7] Update loading-graphql-files.md --- docusaurus/docs/loading-graphql-files.md | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/docusaurus/docs/loading-graphql-files.md b/docusaurus/docs/loading-graphql-files.md index 6a61ffb6250..aa68c93993d 100644 --- a/docusaurus/docs/loading-graphql-files.md +++ b/docusaurus/docs/loading-graphql-files.md @@ -4,18 +4,16 @@ 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 +To load `.gql` and `.graphql` 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 +npm install --save graphl-tag.macro ``` Alternatively you may use `yarn`: ```sh -yarn add --dev graphql-tag.macro +yarn add graphql-tag.macro ``` Then, whenever you want to load `.gql` or `.graphql` files, import the `loader` from the macro package: From 035993b5ff8f7defbd1062b79eb8b504855324dd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pete=20Nyk=C3=A4nen?= Date: Fri, 26 Oct 2018 18:32:27 +0300 Subject: [PATCH 3/7] Update loading-graphql-files.md --- docusaurus/docs/loading-graphql-files.md | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 deletions(-) diff --git a/docusaurus/docs/loading-graphql-files.md b/docusaurus/docs/loading-graphql-files.md index aa68c93993d..e44cf110023 100644 --- a/docusaurus/docs/loading-graphql-files.md +++ b/docusaurus/docs/loading-graphql-files.md @@ -4,10 +4,10 @@ title: Loading .graphql Files sidebar_label: Loading .graphql Files --- -To load `.gql` and `.graphql` files, first install the [`graphl-tag.macro`](https://www.npmjs.com/package/graphql-tag.macro) package by running +To load `.gql` and `.graphql` files, first install the [`graphl.macro`](https://www.npmjs.com/package/graphql.macro) package by running ```sh -npm install --save graphl-tag.macro +npm install --save graphl.macro ``` Alternatively you may use `yarn`: @@ -56,3 +56,16 @@ const query = { ``` 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. + +```js +import { gql } from 'graphql.macro'; + +const query = gql` + query User { + user(id: 5) { + lastName + ...UserEntry1 + } + } +`; +``` From 7162ffd7217ee97eef63e80f370ae124c2d593f2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pete=20Nyk=C3=A4nen?= Date: Fri, 26 Oct 2018 18:38:11 +0300 Subject: [PATCH 4/7] Update loading-graphql-files.md --- docusaurus/docs/loading-graphql-files.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docusaurus/docs/loading-graphql-files.md b/docusaurus/docs/loading-graphql-files.md index e44cf110023..d47cdf10ed3 100644 --- a/docusaurus/docs/loading-graphql-files.md +++ b/docusaurus/docs/loading-graphql-files.md @@ -13,7 +13,7 @@ npm install --save graphl.macro Alternatively you may use `yarn`: ```sh -yarn add graphql-tag.macro +yarn add graphql.macro ``` Then, whenever you want to load `.gql` or `.graphql` files, import the `loader` from the macro package: From 8a87f062d84d12eeea1c607e25fdbdf66d60f198 Mon Sep 17 00:00:00 2001 From: Donovan Date: Thu, 14 Feb 2019 16:40:45 +0200 Subject: [PATCH 5/7] Fix package name Co-Authored-By: petetnt --- docusaurus/docs/loading-graphql-files.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docusaurus/docs/loading-graphql-files.md b/docusaurus/docs/loading-graphql-files.md index d47cdf10ed3..65dbbe6b73a 100644 --- a/docusaurus/docs/loading-graphql-files.md +++ b/docusaurus/docs/loading-graphql-files.md @@ -7,7 +7,7 @@ sidebar_label: Loading .graphql Files To load `.gql` and `.graphql` files, first install the [`graphl.macro`](https://www.npmjs.com/package/graphql.macro) package by running ```sh -npm install --save graphl.macro +npm install --save graphql.macro ``` Alternatively you may use `yarn`: From 04ead00a16f3eff8af29883703083535e431abf0 Mon Sep 17 00:00:00 2001 From: Donovan Date: Thu, 14 Feb 2019 16:41:00 +0200 Subject: [PATCH 6/7] Fix another package name Co-Authored-By: petetnt --- docusaurus/docs/loading-graphql-files.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docusaurus/docs/loading-graphql-files.md b/docusaurus/docs/loading-graphql-files.md index 65dbbe6b73a..b5d8db24750 100644 --- a/docusaurus/docs/loading-graphql-files.md +++ b/docusaurus/docs/loading-graphql-files.md @@ -4,7 +4,7 @@ title: Loading .graphql Files sidebar_label: Loading .graphql Files --- -To load `.gql` and `.graphql` files, first install the [`graphl.macro`](https://www.npmjs.com/package/graphql.macro) package by running +To load `.gql` and `.graphql` files, first install the [`graphql.macro`](https://www.npmjs.com/package/graphql.macro) package by running ```sh npm install --save graphql.macro From 1062456edc1b22e496bfbc3d8c2178ff777402f3 Mon Sep 17 00:00:00 2001 From: Amy Lam Date: Wed, 3 Apr 2019 11:23:37 -0700 Subject: [PATCH 7/7] Update loading-graphql-files.md --- docusaurus/docs/loading-graphql-files.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docusaurus/docs/loading-graphql-files.md b/docusaurus/docs/loading-graphql-files.md index b5d8db24750..423cbff3d3e 100644 --- a/docusaurus/docs/loading-graphql-files.md +++ b/docusaurus/docs/loading-graphql-files.md @@ -4,7 +4,7 @@ title: Loading .graphql Files sidebar_label: Loading .graphql Files --- -To load `.gql` and `.graphql` files, first install the [`graphql.macro`](https://www.npmjs.com/package/graphql.macro) package by running +To load `.gql` and `.graphql` files, first install the [`graphql.macro`](https://www.npmjs.com/package/graphql.macro) package by running: ```sh npm install --save graphql.macro