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

Question

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?

Xerosere

Answer 1

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

Xerosere

Answer 2

I'm pretty sure LoaderOptionsPlugin is not what you want. The webpack docs mention that this is used for migrating from webpack 1 to webpack 2. That's not what we're doing here.

Here's what configuring loaders looks like in a "normal" webpack config:

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          { loader: 'style-loader' },
          {
            loader: 'css-loader',
            options: {
              modules: true
            }
          }
        ]
      }
    ]
  }
};

Following this approach and assuming I correctly understand the Vue 3 docs, here's how I'd configure a Vue 3 application using the original example's data:

module.exports = {
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.css$/,
          use: [
            { loader: 'style-loader' },
            {
              loader: 'css-loader',
              options: {
                modules: true
              }
            }
          ]
        }
      ]
    }
  }
}

Now, we need to configure the graphql loader instead of the css loader:

module.exports = {
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.graphql$/,
          use: 'graphql-tag/loader'
        }
      ]
    }
  }
}

This is untested and I'm just going off of my understanding of webpack and the Vue docs. I don't have a project to test this with but would be more than happy to test if you post a link to your project.

Agonist

Answer 3

if you are using vite use this package vite-plugin-graphql-loader

npm i vite-plugin-graphql-loader --save-dev

In vite.config.ts or vite.config.js:

import { defineConfig } from "vite";
import graphqlLoader from "vite-plugin-graphql-loader";

export default defineConfig({
    plugins: [graphqlLoader()],
});

then import your file

import ExampleQuery from "./example.graphql";

Also don't forget to declare it in the data before use it

data() {
      return {
        ExampleQuery,
      }
    }

Manille