setting up apollo graphql-tag loader issue in vue js

I am new to graphql and I have been getting this error when trying to use .graphql file inside vue apollo. while using gql tag , it works fine , but while importing graphql file this error is showing up.

i have tried to use graphql loader but it doesnt seems to be working.

    Failed to resolve loader: cache-loader
    You may need to install it.
    ERROR in ./src/client/pages/Clients.vue?vue&type=script&lang=js& 
    (./node_modules/babel-loader/lib/index.js??clonedRuleSet- 
    40.use[0]!./node_modules/@vue/cli-service/lib/config/vue-loader-v15-resolve- 
    compat/vue-loader.js??vue-loader-options!./src/client/pages/Clients.vue? 
    vue&type=script&lang=js&) 100:15-55
    Module not found: Error: Can't resolve 'cache-loader' in '/home/noakash/temp/gym- 
    client'
     @ ./src/client/pages/Clients.vue?vue&type=script&lang=js& 1:0-246 1:262-265 1:267- 510 1:267-510
     @ ./src/client/pages/Clients.vue 2:0-59 3:0-54 3:0-54 9:2-8
     @ ./src/router/index.js 5:0-50 31:13-20
     @ ./src/main.js 3:0-30 18:2-8

webpack compiled with 1 error

my Clients.vue file look like this

apollo: {
     clients() {
       return {
         query:require('../../graphql/clients.graphql'),
         result({ loading }) {
           this.loading = loading;
         },
       };
     },
   },

i am using vue-cli

my vue.config.js look like this

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  configureWebpack:{
    module:{
      rules:[
        {
          test: /\.graphql$/,
          use: 'graphql-tag/loader'
        }
      ]
    }
  },
  transpileDependencies: [
    'vuetify'
  ],
})

my package.json

{
  "name": "gym-client",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "apollo": "vue-cli-service apollo:dev --generate-schema",
    "apollo:schema:generate": "vue-cli-service apollo:schema:generate",
    "apollo:schema:publish": "vue-cli-service apollo:schema:publish",
    "apollo:start": "vue-cli-service apollo:start"
  },
  "dependencies": {
    "apollo-boost": "^0.4.9",
    "apollo-cache-inmemory": "^1.6.6",
    "apollo-client": "^2.6.10",
    "apollo-link": "^1.2.14",
    "apollo-link-http": "^1.5.17",
    "core-js": "^3.25.0",
    "graphql": "^15.8.0",
    "graphql-tag": "^2.12.6",
    "jspdf": "^2.5.1",
    "lowdb": "^1.0.0",
    "mkdirp": "^0.5.1",
    "moment": "^2.29.4",
    "regenerator-runtime": "^0.13.9",
    "shortid": "^2.2.8",
    "vue": "^2.6.14",
    "vue-apollo": "^3.1.0",
    "vue-router": "^3.5.1",
    "vuetify": "^2.6.0",
    "vuex": "^3.6.2"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-router": "~5.0.0",
    "@vue/cli-plugin-vuex": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "sass": "~1.32.0",
    "sass-loader": "^10.0.0",
    "vue-cli-plugin-apollo": "~0.22.2",
    "vue-cli-plugin-vuetify": "~2.5.5",
    "vue-template-compiler": "^2.6.14",
    "vuetify-loader": "^1.7.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}