Possibly add a webpack loader file to the npm package

[jgeschwendt]

I'm currently using the snippets below as a custom Webpack loader, as it makes more sense for me to handle the graphql import resolution at compile time (I'm using a serverless-webpack + typescript setup)

Adding a native webpack loader to the npm package might be helpful for Webpack projects.

// ./graphql-import-loader.js
const { importSchema } = require('graphql-import')

module.exports = (source) => {
  this.value = source
  return `module.exports = \`${importSchema(source)}\``
}

// webpack.config.js
  ...
  module: {
    rules: [
      {
        exclude: /node_modules/,
        test: /\.(gql|graphql)$/,
        use: [
          {
            loader: require.resolve('./graphql-import-loader'),
            // loader: 'graphql-import/loader', // this is what i'm proposing
          },
        ]
      },
      ...

// server.ts
import { GraphQLServerLambda } from 'graphql-yoga'
import { Prisma } from './generated/prisma'

import typeDefs from './schema.graphql'
import resolvers from './schema/resolvers'

const {
  graphqlHandler,
  playgroundHandler,
} = new GraphQLServerLambda({
  typeDefs,
  resolvers,
  context: req => ({
    ...req,
    db: new Prisma({
      endpoint: 'https://eu1.prisma.sh/.../test-api/dev',
      secret: 'mysecret123',
      debug: true,
    })
  })
})

export {
  graphqlHandler,
  playgroundHandler,
}

// custom typings
declare module '*.graphql' {
  const content: any
  export default content
}

[kbrandwijk]

That's a nice idea. I created something similar a while back. Feel free to check it out here: https://github.com/supergraphql/graphql-server-static-webpack-js. It works with both graphql-import and graphql-static-binding.

[schickling]

Hi @jgeschwendt – I completely agree!

Would you be open to creating a PR adding a webpack loader for graphql-import?

[kbrandwijk]

@jgeschwendt And if you do, please consider the interaction between graphql-import and graphql-binding. Both are based on a .graphql file. I solved this in a way that I don't particularly like, so I'm very open to suggestions, as I had limited experience with webpack when throwing together that POC.

[jgeschwendt]

I'll take a crack at it.

Here is an example project — https://github.com/jgeschwendt/serverless-boilerplate
& the forked branch I'm working on — https://github.com/jgeschwendt/graphql-import/tree/webpack-loader

You can see the app running here — https://8j5cnifnia.execute-api.us-east-1.amazonaws.com/dev/playground

You'll need to change
https://8j5cnifnia.execute-api.us-east-1.amazonaws.com/ to
https://8j5cnifnia.execute-api.us-east-1.amazonaws.com/dev/
in order to load the schema.

I'll try to look over webpack-loaders and supporting webpackv4 over the next few days to understand how to write a loader the way webpack intends and circle back with something here.

Lmk if I am using anything incorrectly too!

[schickling]

Thanks for your great work on this @jgeschwendt. To keep things a bit more organized I've set up a new repository for graphql-import-loader: https://github.com/graphcool/graphql-import-loader

I've also added you as a collaborator so feel free to keep improving the package! Would also be create if you could add a simple example folder/application to the repo which demonstrates the usage.