prisma-labs / graphql-import-loader Goto Github PK
View Code? Open in Web Editor NEWWebpack loader for `graphql-import`
License: MIT License
Webpack loader for `graphql-import`
License: MIT License
Error, no such file or directory:
# import * from './myFolder/myFile.graphql'
Ok, with absolute paths:
# import * from 'src/.../myFolder/myFile.graphql'
I didnt meet any problem like this with graphql-import.
I just saw that on the documentation you have absolute paths, but what blocks to have the same behavior with the loader?
Hi,
I have been struggling in the last days trying to make this work without any success. What I want to do is configure my graphql server with Webpack 4. The server is written with Typescript. In the end, I want to be able to call something like this in my index.ts file:
import { GraphQLServer } from 'graphql-yoga';
import { Prisma } from './generated/prisma';
import resolvers from './resolvers';
import typeDefs from './schema.graphql';
const server = new GraphQLServer({
typeDefs,
resolvers,
context: req => ({
...req,
db: new Prisma({
endpoint: process.env.PRISMA_ENDPOINT,
secret: process.env.PRISMA_SECRET,
debug: true
})
})
});
server.options.port = Number(process.env.PORT) || 4000;
server.options.endpoint = '/';
server.start(() =>
console.log(`Server is running on http://localhost:${server.options.port}`)
);
Critical point here is
import typeDefs from './schema.graphql';
Until several days of googling, I wasn't able to find a solution to make this work.
Here's my package.json:
{
"name": "MyServer",
"version": "0.0.0",
"scripts": {
"start": "dotenv -- nodemon -e ts,graphql -x ts-node src/index.ts",
"dev": "npm-run-all --parallel start playground",
"debug": "dotenv -- nodemon -e ts,graphql -x ts-node --inspect src/index.ts",
"clean": "rimraf dist",
"tsc": "tsc",
"playground": "graphql playground",
"build": "npm run clean && webpack --config ./webpack.prod.js",
"postinstall": "cross-var prisma login --key $PRISMA_SERVICE_TOKEN && prisma deploy"
},
"dependencies": {
"bcryptjs": "2.4.3",
"graphql-yoga": "1.7.0",
"jsonwebtoken": "8.2.0",
"prisma-binding": "1.5.16"
},
"devDependencies": {
"@types/bcryptjs": "2.4.1",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.6.1",
"cross-var": "^1.1.0",
"dotenv-cli": "1.4.0",
"graphql-cli": "2.15.8",
"graphql-import-loader": "^0.2.1",
"json-loader": "^0.5.7",
"nodemon": "1.17.2",
"npm-run-all": "4.1.2",
"prisma": "1.5.1",
"rimraf": "2.6.2",
"ts-loader": "^4.2.0",
"typescript": "2.8.1",
"uglifyjs-webpack-plugin": "^1.2.5",
"webpack": "^4.6.0",
"webpack-cli": "^2.0.15",
"webpack-node-externals": "^1.7.2"
}
}
Here's my webpack config:
const webpack = require('webpack');
const path = require('path');
const nodeExternals = require('webpack-node-externals');
module.exports = {
target: 'node',
entry: './src/index.ts',
externals: [nodeExternals()],
output: {
filename: '[name].[chunkhash].js',
chunkFilename: '[name].[chunkhash].js',
path: path.resolve(__dirname, 'dist'),
libraryTarget: 'commonjs'
},
resolve: {
extensions: ['.graphql', '.ts', '.js', '.json']
},
node: {
fs: 'empty'
},
module: {
rules: [
{
exclude: /node_modules/,
test: /\.ts$/,
use: [
{ loader: 'babel-loader' },
{ loader: 'ts-loader' },
],
},
{
test: /\.json$/,
exclude: /node_modules/,
loader: 'json-loader'
},
{
test: /\.graphql$/,
exclude: /node_modules/,
loader: 'graphql-import-loader',
}
]
},
mode: 'development',
};
Here's my tsconfig.json:
{
"compilerOptions": {
"target": "es5",
"moduleResolution": "node",
"module": "commonjs",
"allowJs": true,
"sourceMap": true,
"outDir": "dist",
"lib": [
"esnext", "dom"
]
},
"files": ["typings/typings.d.ts"]
}
In addition to my index.ts file, I have defined the following typings.d.ts:
declare module '*.json' {
const content: any
export default content
}
declare module '*.graphql' {
const content: any
export default content
}
In that file, I also tried this:
declare module '*.graphql' {
import { DocumentNode } from 'graphql'
const content: DocumentNode
export default content
}
That doesn't work better. My graphql schemes look like this:
# import Post from "./src/generated/database.graphql"
type Query {
feed: [Post!]!
drafts: [Post!]!
post(id: ID!): Post
me: User
}
type Mutation {
signup(email: String!, password: String!, name: String!): AuthPayload!
login(email: String!, password: String!): AuthPayload!
createDraft(title: String!, text: String!): Post!
publish(id: ID!): Post!
deletePost(id: ID!): Post!
}
type AuthPayload {
token: String!
user: User!
}
type User {
id: ID!
email: String!
name: String!
posts: [Post!]!
}
where "./src/generated/database.graphql" is found at the correct location and is valid (is generated by Prisma deploy).
My file structure is as follows:
Now, when I try the following code in my index.ts, I get the "undefined" output:
import typeDefs from './schema.graphql';
console.log("schema = " + typeDefs);
The output of this console log is:
schema = undefined
I tried to use
import * from typeDefs from './schema.graphql';
This is outputting the complete schema.graphql file in my console, but then I don't know how to use it in the GraphQLServer.
Could someone please explain to me how to make this work?
I'm getting the following error when importing the Prisma generated file (to use as Prisma typeDefs
value):
ERROR in ./src/generated/database.graphql
Module parse failed: Unexpected token (3492:5)
You may need an appropriate loader to handle this file type.
|
| """
| The `Long` scalar type represents non-fractional signed whole numeric values.
| Long can represent values between -(2^63) and 2^63 - 1.
| """
I can load the file using graphql-tag/loader
, but then I run into an error with Prisma ('TypeError: typeDefs.endsWith is not a function'
. What can I do to import the prisma-generated schema file with webpack and use as prisma typeDefs
?
Is it possible to configure the loader to allow importing GraphQL files from a consumed package (e.g., one that is installed with npm)?
I noticed this merged pull request in the graphql-import repository, but not sure how to configure the loader to do something similar.
Hi! ๐
Firstly, thanks for your work on this project! ๐
Today I used patch-package to patch [email protected]
for the project I'm working on.
If there is a comment in the .graphql
file e.g. ${FIELD} ${OPERATOR}...
, this breaks the generated file as it would treat them as a string interpolation due to backticks being used to wrap the export.
My solution is to replace ${
with \${
, since $
is a valid symbol in graphql.
Here is the diff that solved my problem:
diff --git a/node_modules/graphql-import-loader/dist/src/index.js b/node_modules/graphql-import-loader/dist/src/index.js
index be4fa7b..ae741f9 100644
--- a/node_modules/graphql-import-loader/dist/src/index.js
+++ b/node_modules/graphql-import-loader/dist/src/index.js
@@ -4,7 +4,7 @@ var graphql_import_1 = require("graphql-import");
function default_1(source) {
var callback = this.async();
this.cacheable();
- callback(null, "module.exports = `" + graphql_import_1.importSchema(source).replace(/`/g, '\\`') + "`");
+ callback(null, "module.exports = `" + graphql_import_1.importSchema(source).replace(/`/g, '\\`').replace(/\${/g, '\\${') + "`");
}
exports.default = default_1;
//# sourceMappingURL=index.js.map
\ No newline at end of file
This issue body was partially generated by patch-package.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.