typescript-vue-apollo generated file not compatable with vue 3

[longfellowone]

Describe the bug

Generated file should import from 'vue' not '@vue/composition-api' when using vue 3

ERROR in src/generated/graphql.ts:3:36
TS2307: Cannot find module '@vue/composition-api' or its corresponding type declarations.
    1 | import gql from 'graphql-tag';
    2 | import * as VueApolloComposable from '@vue/apollo-composable';
  > 3 | import * as VueCompositionApi from '@vue/composition-api';
      |                                    ^^^^^^^^^^^^^^^^^^^^^^
    4 | export type Maybe<T> = T | null;
    5 | export type Exact<T extends { [key: string]: unknown }> = { [K in keyof T]: T[K] };
    6 | export type ReactiveFunction<TParam> = () => TParam;

To Reproduce

Install vue 3, run generate

3. My codegen.yml config file:

overwrite: true
schema: 'http://localhost:8080/'
documents: 'src/**/*.graphql'
generates:
  src/generated/graphql.ts:
    plugins:
      - typescript
      - typescript-operations
      - typescript-vue-apollo
    config:
      withCompositionFunctions: true

Expected behavior No error

Environment:

• OS: Windows
• "@graphql-codegen/cli": "1.17.8"
• "@graphql-codegen/typescript": "1.17.9"
• "@graphql-codegen/typescript-operations": "1.17.8"
• "@graphql-codegen/typescript-vue-apollo": "^2.0.0"

[longfellowone]

If anyone is looking for a temporary fix

Create the file scrips/typescript-vue-apollo-patch.js

const fs = require('fs')
const path = require('path')

const loadGeneratedPath = path.resolve(__dirname, '../src/generated/graphql.ts')

fs.writeFileSync(
  loadGeneratedPath,
  fs
    .readFileSync(loadGeneratedPath, 'utf8')
    .replace(/@vue\/composition-api/m, 'vue')
)

In your package .json modify your generate script to

  "scripts": {
    "generate": "graphql-codegen --config codegen.yml && node scripts/typescript-vue-apollo-patch.js",
  }

[iskanderbroere]

https://graphql-code-generator.com/docs/plugins/typescript-vue-apollo

overwrite: true
schema: 'http://localhost:8080/'
documents: 'src/**/*.graphql'
generates:
  src/generated/graphql.ts:
    plugins:
      - typescript
      - typescript-operations
      - typescript-vue-apollo
    config:
      withCompositionFunctions: true
      vueApolloComposableImportFrom: vue

does this fix your issue?

edit: looks like the import you need is not configurable, i'll make a PR for it

[iskanderbroere]

https://github.com/dotansimha/graphql-code-generator/pull/4712

[dotansimha]

Fixed in @graphql-codegen/typescript-vue-apollo@2.1.0.