Path problem including graphql files
See original GitHub issueHello,
When I try to simply import a gql file, I always get the error :
error: bundling failed: Error: Cannot find module './myQuery.gql'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:580:15)
at Function.resolve (internal/modules/cjs/helpers.js:30:19)
at PluginPass.exit (C:\Project\importGQL\node_modules\babel-plugin-import-graphql\build\index.js:72:66)
at newFn (C:\Project\importGQL\node_modules\@babel\traverse\lib\visitors.js:193:21)
at NodePath._call (C:\Project\importGQL\node_modules\@babel\traverse\lib\path\context.js:53:20)
at NodePath.call (C:\Project\importGQL\node_modules\@babel\traverse\lib\path\context.js:40:17)
at NodePath.visit (C:\Project\importGQL\node_modules\@babel\traverse\lib\path\context.js:97:8)
at TraversalContext.visitQueue (C:\Project\importGQL\node_modules\@babel\traverse\lib\context.js:118:16)
at TraversalContext.visitMultiple (C:\Project\importGQL\node_modules\@babel\traverse\lib\context.js:85:17)
My code :
import Query from "./myQuery.gql";
The only way to make it working is to use the absolute path to the graphql path. ex : C:\Project\importGQL\components\myQuery.gql
Reproduction
I reproduce it on a simple project : https://github.com/Kisepro/importGQLBug.git
Investigation
When I check in babel-plugin-import-graphql\build\index.js, it calls the function with the following parameters :
-
importPath ./Query.gql
-
jsFilename C:\Project\importGQL\node_modules\react-native\scripts\components\ComponentA.js
The ComponentA.js file is obviously not in under node_modules
Issue Analytics
- State:
- Created 5 years ago
- Comments:7 (2 by maintainers)
Top Results From Across the Web
Graphql file path autocompletion in VSCODE - Stack Overflow
I just wanted to post the answer for anyone with the same problem. ... Looks .graphql filetypes are not included in default vs...
Read more >Loading GraphQL Schemas from Different Sources
All found schema files can be merged into a complete schema. There is support for #import syntax (formerly known as graphql-import ). The...
Read more >Five Common Problems in GraphQL Apps (And How to Fix ...
Schema duplication; Server/client data mismatch; Superfluous database calls; Poor performance; Boilerplate overdose. I'm willing to bet your app ...
Read more >Loading queries with Webpack - Apollo GraphQL Docs
You can load GraphQL queries over .graphql files using Webpack. The package graphql-tag comes with a loader easy to setup and with some...
Read more >GraphQL file uploads - evaluating the 5 most common ...
How to evaluate different GraphQL file upload solutions? ... The WunderGraph Way of solving problems like this is to abstract away the ...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
I don’t believe this qualifes as a problem with this plugin but instead is a quirk of react-native/metro. You need to configure metro to include the .graphql/.gql files when it’s bundling up files to send to babel.
In metro.config.js you’ll need to add the following:
After seeing this mentioned in #48 as well, I believe @stephencaldwell is correct. I’m closing this. If anyone experiences this issue with the settings mentioned above, let me know and I’ll reopen.