Using karma-typescript with graphql-tag loader

Question

I am trying to run tests written in TypeScript using tape and the karma-typescript loader.

In my project I use webpack with graphql-tag/loader and import the queries directly into my TypeScript files like:

import myQuery from "../query/hello.graphql";

These imports are causing issues when I try and run the tests.

module.exports = function (config) {
    config.set({
        frameworks: ["tap", "karma-typescript"],
        files: [
            "src/**/*.ts",
            "src/**/*.tsx",
            "query/**/*.graphql"
        ],
        preprocessors: {
            "src/**/*.ts": ["karma-typescript"],
            "src/**/*.tsx": ["karma-typescript"]
        },
        karmaTypescriptConfig: {
            compilerOptions: {
                "skipLibCheck": true,
                "allowSyntheticDefaultImports": true
            },
            bundlerOptions: {
                transforms: [
                    require("karma-typescript-es6-transform")()
                ]
            }
        },
        reporters: ["progress", "karma-typescript"],
        browsers: ["Firefox"]
    });
};

I guess that I would ideally like to perform a second transform on the .graphql files. Based on the approach used in jest-transform-graphql, I tried adding another transform:

function (context, callback) {
    if (/\.graphql$/.test(context.module)) {
        context.source = loader.call({ cacheable() { } }, context.source);
        return callback(undefined, true);
    }
    return callback(undefined, false);
}

But I still get errors like:

  {
    "message": "SyntaxError: unexpected token: identifier\nat query/hello.graphql:1:6\n\n",
    "str": "SyntaxError: unexpected token: identifier\nat query/hello.graphql:1:6\n\n"
  }

How can I apply the transformation to the graphql files, so that I don't get syntax errors from them in the browser?