GithubHelp home page GithubHelp logo

prisma-labs / graphql-import-loader Goto Github PK

View Code? Open in Web Editor NEW
83.0 83.0 13.0 12 KB

Webpack loader for `graphql-import`

License: MIT License

TypeScript 89.21% JavaScript 10.79%
graphql graphql-import webpack webpack-loader

graphql-import-loader's Issues

Template string interpolation in comment breaks loaded graphql asset

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.

Error with relative paths inside sdl

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?

Error when importing Prisma-generated schema

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?

Can't get graphql-import-loader work in my Prisma GraphQLServer written in typescript

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:

  • database
    • datamodel.graphql
    • ...
  • node_modules
  • src
    • generated
      • database.graphql
      • prisma.ts
    • resolvers
      • Query.ts
      • ...
    • index.ts
    • schema.graphql
    • ...
  • typings
    • typings.d.ts

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?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.