Any pointers on how to bundle `.graphql`files with...
# orm-help
d
Any pointers on how to bundle `.graphql`files with webpack? Been trying all day to successfully use
graphql-import-loader
but whenever I try to build the app it just compiles all my
.ts
files only
m
Check the config I have here (stolen from someone here smarter than me): https://github.com/medelman17/prisma-yoga-s3-uploads/tree/master/build-utils
For TS, I just throw in a rule for
ts-loader
d
so basically you replace the import with importSchema ?
👍 1
I see, but my issue is that webpack doesn't even copy the
*.graphql
files to the
dist
folder... Am I missing something here? @medelman
g
What’s your webpack configuration? This rule works for me:
Copy code
{ test: /\.graphql$/, exclude: /node_modules/, use: [{ loader: 'graphql-import-loader' }] },
d
i'll better paste the whole `webpack.config.js`:
Copy code
'use strict';

var HappyPack = require('happypack');
var ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');

const path = require('path')
var fs = require('fs');
var nodeModules = {};
fs.readdirSync('node_modules')
  .filter(function(x) {
    return ['.bin'].indexOf(x) === -1;
  })
  .forEach(function(mod) {
    nodeModules[mod] = 'commonjs ' + mod;
  });
const nodeExternals = require('webpack-node-externals')

module.exports = {
    context: __dirname, // to automatically find tsconfig.json
    devtool: 'inline-source-map',
    entry: './src/index.ts',
    externals: [nodeExternals()], 
    output: {
        filename: '[name].js',
        libraryTarget: 'commonjs',
        path: path.resolve(__dirname, 'dist'),
     },
    resolve: {
        extensions: [ '.ts', '.js', '.graphql', '.json' ],
    },
    module: {
        rules: [
            {
                test: /\.ts?$/,
                exclude: /node_modules/,
                use: [{ loader: 'happypack/loader?id=ts' }]
            },
            {
                test: /\.graphql$/,
                exclude: /node_modules/,
                use: [{ loader: 'happypack/loader?id=graphql' }]
            },
            {
                test: /\.json$/,
                exclude: /node_modules/,
                loader: 'json-loader'
            }, 
        ]
    },
    plugins: [
        new HappyPack({
            id: 'ts',
            threads: 2,
            loaders: [
                {
                    path: 'ts-loader',
                    query: { happyPackMode: true }
                }
            ]
        }),
        new HappyPack({
            id: 'graphql',
            threads: 2,
            loaders: [
                {
                    path: 'graphql-import-loader'
                }
            ]
        }),
        new ForkTsCheckerWebpackPlugin({ checkSyntacticErrors: true })
    ],
    devServer: {
        inline:true,
        port: 4000,
        contentBase: path.resolve(__dirname, 'dist')
    },
    target: 'node',
    externals: nodeModules
};
i'm quite new to webpack so I might be mixing apples with oranges here