graphql requests in tests

[websitevirtuoso]

Hello.
I have problem with getting my gql object in cypress.
I have next setup

vuejs 3 latest - composition API
vite latest
https://v4.apollo.vuejs.org/guide/ - apollo vue v4
Cypress 10.2.0
graphql plugin to wrap objects into gql object
@rollup/plugin-graphql - latest version

I have next test case
https://gist.github.com/websitevirtuoso/c39b6b817a930b99299d353b83a05afe
Command - gqlRequest looks like
https://gist.github.com/websitevirtuoso/2c2146eaecae3631421c83633afcb7cc

On line 3 I import gql query
My gql file looks like
https://gist.github.com/websitevirtuoso/1a850aa2b911acf431e3bbf8ac5595af
1 file can have multiple queries or mutations.
I import them like this

import { CategoryUpsert } from '../../../graphql/mutations/category.gql'
and this object I use in mutations or queries functions

In cypress I am getting this type of error when trying to get my gql object

Error: Webpack Compilation Error
./src/modules/blog/graphql/mutations/category.gql 1:0
Module parse failed: Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> #import "../fragments/category.fragment.gql"
| 
| mutation CategoryUpsert ($id: ID, $title: String!) {
 @ ./src/modules/blog/tests/e2e/categories/tc01_categories.spec.ts 3:0-73 19:22-36
    at Watching.handle [as handler] (/home/viktord/.cache/Cypress/10.2.0/Cypress/resources/app/node_modules/@packages/server/node_modules/@cypress/webpack-preprocessor/dist/index.js:180:23)
    at /home/viktord/.cache/Cypress/10.2.0/Cypress/resources/app/node_modules/webpack/lib/Watching.js:99:9
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/home/viktord/.cache/Cypress/10.2.0/Cypress/resources/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (/home/viktord/.cache/Cypress/10.2.0/Cypress/resources/app/node_modules/tapable/lib/Hook.js:154:20)
    at Watching._done (/home/viktord/.cache/Cypress/10.2.0/Cypress/resources/app/node_modules/webpack/lib/Watching.js:98:28)
    at /home/viktord/.cache/Cypress/10.2.0/Cypress/resources/app/node_modules/webpack/lib/Watching.js:73:19
    at Compiler.emitRecords (/home/viktord/.cache/Cypress/10.2.0/Cypress/resources/app/node_modules/webpack/lib/Compiler.js:499:39)
    at /home/viktord/.cache/Cypress/10.2.0/Cypress/resources/app/node_modules/webpack/lib/Watching.js:54:20
    at /home/viktord/.cache/Cypress/10.2.0/Cypress/resources/app/node_modules/webpack/lib/Compiler.js:485:14
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/home/viktord/.cache/Cypress/10.2.0/Cypress/resources/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (/home/viktord/.cache/Cypress/10.2.0/Cypress/resources/app/node_modules/tapable/lib/Hook.js:154:20)
    at /home/viktord/.cache/Cypress/10.2.0/Cypress/resources/app/node_modules/webpack/lib/Compiler.js:482:27
    at /home/viktord/.cache/Cypress/10.2.0/Cypress/resources/app/node_modules/neo-async/async.js:2818:7
    at done (/home/viktord/.cache/Cypress/10.2.0/Cypress/resources/app/node_modules/neo-async/async.js:3522:9)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/home/viktord/.cache/Cypress/10.2.0/Cypress/resources/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (/home/viktord/.cache/Cypress/10.2.0/Cypress/resources/app/node_modules/tapable/lib/Hook.js:154:20)
    at /home/viktord/.cache/Cypress/10.2.0/Cypress/resources/app/node_modules/webpack/lib/Compiler.js:464:33
    at /home/viktord/.cache/Cypress/10.2.0/Cypress/resources/app/node_modules/graceful-fs/graceful-fs.js:143:16
    at /home/viktord/.cache/Cypress/10.2.0/Cypress/resources/app/node_modules/graceful-fs/graceful-fs.js:143:16
    at /home/viktord/.cache/Cypress/10.2.0/Cypress/resources/app/node_modules/graceful-fs/graceful-fs.js:61:14
    at FSReqCallback.oncomplete (node:fs:193:23)

How to use gql objects in cypress?
From this article
https://glebbahmutov.com/blog/request-graphql/
I can define gql query manually in cy.request but it will duplicate my gql objects. I would like to reuse my existing gql objects. Please help me how to do this?

I know that I need to add cypress-preprocessor but I couldn't find any
https://docs.cypress.io/plugins/directory
Something like this

webpackConfig.module.rules.push({
    test: /\.feature$/,
    use: [
      {
        loader: 'cypress-cucumber-preprocessor/loader',
      },
    ],
  });