webpackvue.jsgraphqlvue-cli

How to get Vue (vue cli 3) to properly handle GraphQL files?


I have a new vue-cli 3 based project, which has .graphql files in the src/ folder, e.g.:

#import "./track-list-fragment.graphql"

query ListTracks(
  $sortBy: String
  $order: String
  $limit: Int
  $nextToken: String
) {
  listTracks(
    sortBy: $sortBy
    order: $order
    limit: $limit
    nextToken: $nextToken
  ) {
    items {
      ...TrackListDetails
    }
    nextToken
  }
}

And when I run yarn serve, it's complaining about not having a loader for GraphQL:

Module parse failed: Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type.
> #import "./track-list-fragment.graphql"
|
| query ListTracks(

But I do have my vue.config.js set up properly (I think):

const webpack = require('webpack');
const path = require('path');

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        $scss: path.resolve('src/assets/styles'),
      },
    },
    plugins: [
      new webpack.LoaderOptionsPlugin({
        test: /\.graphql$/,
        loader: 'graphql-tag/loader',
      }),
    ],
  },
};

How do I fix this?


Solution

  • This works!

    const path = require('path');
    
    module.exports = {
      pluginOptions: {
        i18n: {
          locale: 'en',
          fallbackLocale: 'en',
          localeDir: 'locales',
          enableInSFC: false,
        },
      },
      configureWebpack: {
        resolve: {
          alias: {
            $element: path.resolve(
              'node_modules/element-ui/packages/theme-chalk/src/main.scss'
            ),
          },
        },
      },
      chainWebpack: config => {
        config.module
          .rule('graphql')
          .test(/\.graphql$/)
          .use('graphql-tag/loader')
          .loader('graphql-tag/loader')
          .end();
      },
    };