Add loader for .graphql files by petetnt · Pull Request #3909 · react/create-react-app

petetnt · 2018-01-23T21:08:26Z

Important notice

The implicit loader was removed in favor of the macro approach, which gives much more flexibility (for example using different graphql-js version instead of the one shipped with CRA) with little to no code changes.

You can load .gql and .graphql files by installing the graphql-tag.macro from npm and using it like this:

import{loader}from'graphql.macro';constA=loader('./assets/graphql.graphql');

The loader statement gets replaced with the actual graphql-tag object on build time and the precomputed object also lowers performance overhead by bit, so it behaves like the loader in this PR did!

OLD PR

This PR adds the .graphql file loading feature discussed in #3873.

A POC of the concept can be found in https://github.com/petetnt/cra-pr-3909-poc/ (might need to link to react-scripts after installing). Tested the following things:

✅ works while developing with yarn start
✅ works after building with yarn build

Also looked at the output after ejecting and it looks correct, couldn't test it yet though after yarn eject due to some version issues 🤷

The PR adds following things:

Ability to load and preprocess .graphql and .gql files with graphql-tag/loader
Updates the README.md and User guide with descriptions and usage
Adds a jest transform so the .graphql files work with tests too

Tested it out with react-apollo and it worked beautifully. Should work with Relay Modern too, but prerequisite for it is #2343

Signed-off-by: petetnt <pete.a.nykanen@gmail.com>

iansu · 2018-01-23T21:23:14Z

Nice! On first glance this looks good to me. Can you add an e2e test (in packages/react-scripts/fixtures/kitchensink/src/features/webpack) for importing a .graphql file?

petetnt · 2018-01-23T21:38:52Z

Yep! Working on the tests right now!

viankakrisna · 2018-01-23T21:46:07Z

 "file-loader": "1.1.6",
 "fs-extra": "5.0.0",
+ "graphql": "^0.12.3",
+ "graphql-tag": "^2.6.1",


we need to pin these new dependencies

Pinned in d1dd2a8

Signed-off-by: petetnt <pete.a.nykanen@gmail.com>

petetnt · 2018-01-23T21:59:10Z

Added tests, running local tests with docker fail on the npm cache clean step, if the tests fail on the CI I'll investigate / fix that and fix the tests again 🤔

iansu · 2018-01-23T22:01:10Z

I don't think the local e2e tests in docker are working properly right now. Let's just see what happens on CI.

Signed-off-by: petetnt <pete.a.nykanen@gmail.com>

petetnt · 2018-01-24T10:53:31Z

Tests now pass with 435ece0 on Travis, there's something weird going on at AppVeyor at large.

gaearon · 2018-02-02T20:47:16Z

 '^.+\\.css$': resolve('config/jest/cssTransform.js'),
- '^(?!.*\\.(js|jsx|mjs|css|json)$)': resolve(
+ '^.+\\.(gql|graphql)$': isEjecting
+ ? '<rootDir>/node_modules/jest-transform-graphql'


Can't this line just be 'jest-transform-graphql'?

I'm not sure about that. This is just copying the pattern used above for babel-jest.

Hmm. Okay. Let's keep it for now.

gaearon · 2018-02-02T20:48:58Z


 `node-sass-chokidar` is used here as it addresses these issues.

+## Adding GraphQL files


This section should be after "Adding Images, ..."

petetnt · 2018-02-03T13:46:26Z

Thanks @iansu! 👌

gaearon · 2018-02-03T14:33:58Z

 "html-webpack-plugin": "2.30.1",
 "identity-obj-proxy": "3.0.0",
 "jest": "22.1.2",
+ "jest-transform-graphql": "2.1.0",


It's kind of frustrating that everybody will "inherit" whole three GQL dependencies after ejecting even if they don't use graphql.

I do agree, but not sure what the other option would be.

Let's remove this dependency. All it does is literally one-line call to webpack loader, and we could do the same in our Jest transform file.

gaearon · 2018-02-03T14:34:25Z

 An alternative way of handling static assets is described in the next section.

+## Adding GraphQL files
+


This needs to have a note about it being supported only in 2.0.0+, like other similar features.

Signed-off-by: petetnt <pete.a.nykanen@gmail.com>

paulomcnally · 2018-03-05T22:55:39Z

Is this available in the version 1.5.2?

petetnt · 2018-03-06T07:39:32Z

@paulomcnally This feature will be available on the upcoming version 2 of CRA. If you want to load .graphql files in 1.5.2., you might want to consider https://github.com/timarney/react-app-rewired to modify the config of CRA to match this PR.

paulomcnally · 2018-03-06T14:41:05Z

Thanks for your answer @petetnt, I'll wait for version 2.x.

* Add graphql loader to webpack config Signed-off-by: petetnt <pete.a.nykanen@gmail.com> * Update README.md Signed-off-by: petetnt <pete.a.nykanen@gmail.com> * Update react-scripts README.md Signed-off-by: petetnt <pete.a.nykanen@gmail.com> * Add graphql jest transform Signed-off-by: petetnt <pete.a.nykanen@gmail.com> * Add integration tests, pin versions in package.json Signed-off-by: petetnt <pete.a.nykanen@gmail.com> * Tests expect regexp matchers Signed-off-by: petetnt <pete.a.nykanen@gmail.com> * Use strict equal test instead Signed-off-by: petetnt <pete.a.nykanen@gmail.com> * Escaping is hard Signed-off-by: petetnt <pete.a.nykanen@gmail.com> * Add comment for signifying a different file * Update docs * Fix jest config * Remove node_modules exclusion * Update README.md * Inline graphql jest transform Signed-off-by: petetnt <pete.a.nykanen@gmail.com> * Update copyright header Signed-off-by: petetnt <pete.a.nykanen@gmail.com> * Use .graphql extension only Signed-off-by: petetnt <pete.a.nykanen@gmail.com>

See: react/create-react-app#3909

* Add graphql loader to webpack config Signed-off-by: petetnt <pete.a.nykanen@gmail.com> * Update README.md Signed-off-by: petetnt <pete.a.nykanen@gmail.com> * Update react-scripts README.md Signed-off-by: petetnt <pete.a.nykanen@gmail.com> * Add graphql jest transform Signed-off-by: petetnt <pete.a.nykanen@gmail.com> * Add integration tests, pin versions in package.json Signed-off-by: petetnt <pete.a.nykanen@gmail.com> * Tests expect regexp matchers Signed-off-by: petetnt <pete.a.nykanen@gmail.com> * Use strict equal test instead Signed-off-by: petetnt <pete.a.nykanen@gmail.com> * Escaping is hard Signed-off-by: petetnt <pete.a.nykanen@gmail.com> * Add comment for signifying a different file * Update docs * Fix jest config * Remove node_modules exclusion * Update README.md * Inline graphql jest transform Signed-off-by: petetnt <pete.a.nykanen@gmail.com> * Update copyright header Signed-off-by: petetnt <pete.a.nykanen@gmail.com> * Use .graphql extension only Signed-off-by: petetnt <pete.a.nykanen@gmail.com>

silentlight · 2018-10-10T23:38:30Z

I cannot seem to load .graphql files using CRA version 2.0.3.

Here are my packages in package.json

 "apollo-link": "^1.2.3",
"apollo-link-error": "^1.1.1",
"apollo-link-http": "^1.5.5",
"axios": "^0.18.0",
"babel-plugin-dynamic-import-node": "^2.0.0",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react-app": "^3.1.1",
"compression": "^1.7.3",
"cross-env": "^5.2.0",
"env-cmd": "^8.0.2",
"express": "^4.16.2",
"file-loader": "^1.1.6",
"graphql": "^14.0.2",
"graphql-tag": "^2.10.0",
"graphql.macro": "^1.0.2",
"ignore-styles": "^5.0.1",
"node-fetch": "^2.2.0",
"pm2": "^3.2.2",
"react": "^16.5.2",
"react-dom": "^16.5.2",
"react-loadable": "^5.3.1",
"react-scripts": "^2.0.3",
"styled-components": "^3.4.9",
"url-loader": "^1.0.1"

Here is how I import it:

import pageDataQuery from '../../graphql/queries/pageData.graphql';

The error I am getting is Unexpected token inside of my .graphql file. Do I need to do anything else after installing graphql-tag? Any help would be greatly appreciated.

Thanks

psamd · 2018-10-17T12:58:30Z

@silentlight the support for 'graphql-tag/loader' was removed #5076

Try using any one of these macros:

Or just eject your app and add the 'graphql-tag/loader' in your webpack config files (dev & prod)

// The GraphQL loader preprocesses GraphQL queries in .graphql files.
{
test: /\.(graphql)$/,
loader: 'graphql-tag/loader',
},

chrisdostert · 2018-10-18T18:04:32Z

why was this reverted? this functionality was awesome

petetnt · 2018-10-18T18:14:19Z

Hi @chrisdostert!

The implicit loader was removed in favor of the macro approach, which gives much more flexibility (for example using different graphql-js version instead of the one shipped with CRA) with little to no code changes.

You can load .gql and .graphql files by installing the graphql-tag.macro from npm and using it like this:

import { loader } from 'graphql.macro';
const A = loader('./assets/graphql.graphql');

The loader statement gets replaced with the actual graphql-tag object on build time and the precomputed object also lowers performance overhead by bit!

chrisdostert · 2018-10-18T19:40:43Z

thx @petetnt for response.
This is opinionated, but personally the simplicity of single import & no additional direct dependency was quite nice & seemed to be more in line w/ the way CRA has approached features in general.
Again, opinionated.

iansu · 2018-10-18T20:06:21Z

As @petetnt mentioned, the main downside to this approach is that you're stuck with whatever version of graphql-js Create React App uses. And the only way to upgrade would be for CRA to update the version and then for you to upgrade to that new version of CRA in your project.

While using macros requires a bit of extra work we think the flexibility is worth the tradeoff. It also means we don't have to add loaders for every conceivable file type or for different tools (CSS-in-JS libraries for example).

delmendo · 2018-11-29T22:28:17Z

Feels like someone should put an alert here - the macro version hits a bug in babel so it never reloads your graphql files :(

#5580

masull · 2018-12-28T20:15:03Z

graphql.macro does not seem to work with a .graphql file that contains multiple operations.

./queries.graphql
query Query1 {
query1 {
...
query Query2 {
query2{
…

import {loader} from 'graphql.macro';
const {Query1, Query2} = loader('./queries.graphql');

Query1 and Query2 are undefined.

petetnt added 4 commits January 23, 2018 20:49

Add graphql loader to webpack config
7b278c1
Signed-off-by: petetnt <pete.a.nykanen@gmail.com>

Update README.md
123e89e
Signed-off-by: petetnt <pete.a.nykanen@gmail.com>

Update react-scripts README.md
c64c25c
Signed-off-by: petetnt <pete.a.nykanen@gmail.com>

Add graphql jest transform
53e215f
Signed-off-by: petetnt <pete.a.nykanen@gmail.com>

facebook-github-bot added the CLA Signed label Jan 23, 2018

petetnt mentioned this pull request Jan 23, 2018
Support Relay Modern and Apollo out of the box #3873
Closed

viankakrisna reviewed Jan 23, 2018
View reviewed changes

Add integration tests, pin versions in package.json
d1dd2a8
Signed-off-by: petetnt <pete.a.nykanen@gmail.com>

iansu added this to the 2.0.0 milestone Jan 23, 2018

petetnt added 3 commits January 24, 2018 10:39

Tests expect regexp matchers
f32d3fd
Signed-off-by: petetnt <pete.a.nykanen@gmail.com>

Use strict equal test instead
3a14cd1
Signed-off-by: petetnt <pete.a.nykanen@gmail.com>

Escaping is hard
435ece0
Signed-off-by: petetnt <pete.a.nykanen@gmail.com>

Add comment for signifying a different file
0860029

gaearon assigned iansu Feb 2, 2018

gaearon reviewed Feb 2, 2018
View reviewed changes

iansu added 4 commits February 2, 2018 14:12

Update docs
eeed28f

Merge next into branch
683d818

Fix jest config
e68515d

Remove node_modules exclusion
786ee4a

gaearon reviewed Feb 3, 2018
View reviewed changes

petetnt added 2 commits February 3, 2018 16:37

Update README.md
5198496

Inline graphql jest transform
ce2e153
Signed-off-by: petetnt <pete.a.nykanen@gmail.com>

patrick91 mentioned this pull request Mar 3, 2018
Add loader for .graqhql files wmonk/create-react-app-typescript#270
Open

jpdorsy mentioned this pull request Mar 22, 2018
Module not found: Can't resolve 'module' in '/Users/Documents/git/project-name/node_modules/require-from-string' evenchange4/graphql.macro#25
Closed

yoiang pushed a commit to Adorkable-forkable/create-react-app-typescript that referenced this pull request May 2, 2018
Add loader for .graqhql files
983002c
See: react/create-react-app#3909

patrick91 added a commit to patrick91/create-react-app-typescript that referenced this pull request May 14, 2018
Add loader for .graqhql files
d68ffec
See: react/create-react-app#3909

SaraVieira mentioned this pull request Jun 27, 2018
add gql file extension #4691
Closed

steobrien mentioned this pull request Aug 13, 2018
babel-preset-react-app: add babel-plugin-relay #2343
Closed

kassens mentioned this pull request Aug 15, 2018
Consider decoupling CRA 2.0 from graphql-tag version #4893
Closed

Timer added a commit to Timer/create-react-app that referenced this pull request Sep 24, 2018
Revert "Add loader for .graphql files (react#3909)"
6e2c0d7

Timer added a commit that referenced this pull request Sep 24, 2018
Revert "Add loader for .graphql files (#3909)" (#5076)
03a7091

zmitry pushed a commit to zmitry/create-react-app that referenced this pull request Sep 30, 2018
Revert "Add loader for .graphql files (react#3909)" (react#5076)
d80d9c7

petetnt mentioned this pull request Oct 18, 2018
Document .graphql and .gql file loading with graphql.macro #5481
Merged

glennreyes mentioned this pull request Nov 7, 2018
Changes in a .graphql file doesn't recompile automatically #5744
Closed

lockBot locked and limited conversation to collaborators Jan 8, 2019


		`node-sass-chokidar` is used here as it addresses these issues.

		## Adding GraphQL files

		An alternative way of handling static assets is described in the next section.

		## Adding GraphQL files

Uh oh!

Uh oh!

Conversation

petetnt commented Jan 23, 2018• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Important notice

OLD PR

Uh oh!

iansu commented Jan 23, 2018

Uh oh!

petetnt commented Jan 23, 2018

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

petetnt commented Jan 23, 2018

Uh oh!

iansu commented Jan 23, 2018

Uh oh!

petetnt commented Jan 24, 2018

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

petetnt commented Feb 3, 2018

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

paulomcnally commented Mar 5, 2018

Uh oh!

petetnt commented Mar 6, 2018

Uh oh!

paulomcnally commented Mar 6, 2018

Uh oh!

silentlight commented Oct 10, 2018• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

psamd commented Oct 17, 2018

Uh oh!

chrisdostert commented Oct 18, 2018

Uh oh!

petetnt commented Oct 18, 2018

Uh oh!

chrisdostert commented Oct 18, 2018

Uh oh!

iansu commented Oct 18, 2018

Uh oh!

delmendo commented Nov 29, 2018• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

masull commented Dec 28, 2018

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

14 participants

petetnt commented Jan 23, 2018•
edited
Loading

silentlight commented Oct 10, 2018•
edited
Loading

delmendo commented Nov 29, 2018•
edited
Loading