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?
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();
},
};