-
-
Notifications
You must be signed in to change notification settings - Fork 26.9k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add loader for .graphql files #3909
Conversation
Signed-off-by: petetnt <pete.a.nykanen@gmail.com>
Signed-off-by: petetnt <pete.a.nykanen@gmail.com>
Signed-off-by: petetnt <pete.a.nykanen@gmail.com>
Signed-off-by: petetnt <pete.a.nykanen@gmail.com>
Nice! On first glance this looks good to me. Can you add an e2e test (in |
Yep! Working on the tests right now! |
packages/react-scripts/package.json
Outdated
@@ -44,9 +44,12 @@ | |||
"extract-text-webpack-plugin": "3.0.2", | |||
"file-loader": "1.1.6", | |||
"fs-extra": "5.0.0", | |||
"graphql": "^0.12.3", | |||
"graphql-tag": "^2.6.1", |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
we need to pin these new dependencies
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Pinned in d1dd2a8
Signed-off-by: petetnt <pete.a.nykanen@gmail.com>
Added tests, running local tests with docker fail on the |
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>
Signed-off-by: petetnt <pete.a.nykanen@gmail.com>
Signed-off-by: petetnt <pete.a.nykanen@gmail.com>
Tests now pass with 435ece0 on Travis, there's something weird going on at AppVeyor at large. |
@@ -35,7 +35,10 @@ module.exports = (resolve, rootDir, isEjecting) => { | |||
? '<rootDir>/node_modules/babel-jest' | |||
: resolve('config/jest/babelTransform.js'), | |||
'^.+\\.css$': resolve('config/jest/cssTransform.js'), | |||
'^(?!.*\\.(js|jsx|mjs|css|json)$)': resolve( | |||
'^.+\\.(gql|graphql)$': isEjecting | |||
? '<rootDir>/node_modules/jest-transform-graphql' |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can't this line just be 'jest-transform-graphql'
?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'm not sure about that. This is just copying the pattern used above for babel-jest
.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hmm. Okay. Let's keep it for now.
@@ -687,6 +688,32 @@ Now running `npm start` and `npm run build` also builds Sass files. | |||
|
|||
`node-sass-chokidar` is used here as it addresses these issues. | |||
|
|||
## Adding GraphQL files |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This section should be after "Adding Images, ..."
Thanks @iansu! 👌 |
packages/react-scripts/package.json
Outdated
"html-webpack-plugin": "2.30.1", | ||
"identity-obj-proxy": "3.0.0", | ||
"jest": "22.1.2", | ||
"jest-transform-graphql": "2.1.0", |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It's kind of frustrating that everybody will "inherit" whole three GQL dependencies after ejecting even if they don't use graphql.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I do agree, but not sure what the other option would be.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Done ✅
@@ -729,6 +730,32 @@ Please be advised that this is also a custom feature of Webpack. | |||
**It is not required for React** but many people enjoy it (and React Native uses a similar mechanism for images).<br> | |||
An alternative way of handling static assets is described in the next section. | |||
|
|||
## Adding GraphQL files | |||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This needs to have a note about it being supported only in 2.0.0+, like other similar features.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Done ✅
Signed-off-by: petetnt <pete.a.nykanen@gmail.com>
Is this available in the version 1.5.2? |
@paulomcnally This feature will be available on the upcoming version 2 of CRA. If you want to load |
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>
* 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>
I cannot seem to load .graphql files using CRA version 2.0.3. Here are my packages in package.json
Here is how I import it:
The error I am getting is Thanks |
@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)
|
why was this reverted? this functionality was awesome |
Hi @chrisdostert! The implicit loader was removed in favor of the macro approach, which gives much more flexibility (for example using different You can load
The loader statement gets replaced with the actual |
thx @petetnt for response. |
As @petetnt mentioned, the main downside to this approach is that you're stuck with whatever version of 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). |
Feels like someone should put an alert here - the macro version hits a bug in babel so it never reloads your graphql files :( |
graphql.macro does not seem to work with a .graphql file that contains multiple operations. ./queries.graphql import {loader} from 'graphql.macro'; Query1 and Query2 are undefined. |
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:
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:yarn start
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:
.graphql
and.gql
files withgraphql-tag/loader
README.md
andUser guide
with descriptions and usagejest
transform so the.graphql
files work with tests tooTested it out with
react-apollo
and it worked beautifully. Should work withRelay Modern
too, but prerequisite for it is #2343