Typescript Imports are Broken on @vue/apollo-composable alpha 11 & 12

[seanaye]

Describe the bug Using @vue/apollo-composable > alpha 10 is breaking typescript imports with @graphql-codegen/typescript-vue-apollo generated code.

To Reproduce Steps to reproduce the behavior:

1. Setup a project with @vue/apollo-composable@latest and @graphql-condegen/typescript-vue-apollo@latest
2. yarn graphql-codegen && yarn dev
3. Slew of Parameter x implicitly has an 'any' type.
4. yarn add @vue/apollo-composable@v4.0.0-alpha.10 && yarn dev
5. All typescript errors are gone and composition functions have correct typing

Expected behavior All type imports should be working on versions greater than alpha.10

Versions vue: 2.6 vue-apollo: @vue/apollo-composable@v4.0.0-alpha.12 apollo-client: 2.6.10

Additional context This appears to be independent of @graphql-codegen/typescript-vue-apollo I have tried creating the codegen files using the latest several versions of @graphql-codegen/typescript-vue-apollo in combination with @vue/apollo-composable. Through trial and error I determined that any codegen file generated with any of the last several versions of @graphql-codegen/typescript-vue-apollo works with apollo-composable alpha 10. Not a single codegen file works with apollo-composable > v.alpha.10

[DarkLite1]

Same here, when upgrading the package @vue/apollo-composable from 4.0.0-alpha.10 to 4.0.0-alpha.12 we get the following TypeScript errorr:

TS2307: Cannot find module '@apollo/client/core' or its corresponding type declarations.

When opening file T:\Test\Brecht\Node\prod\hip-frontend\node_modules\@vue\apollo-composable\dist\useApolloClient.d.ts we can indeed see that the module is not found:

package.json

  "dependencies": {
    "@azure/msal-browser": "2.6.1",
    "@quasar/extras": "^1.9.10",
    "@vue/apollo-composable": "^4.0.0-alpha.12",
    "@vue/composition-api": "1.0.0-beta.14",
    "apollo-cache-inmemory": "^1.6.6",
    "apollo-client": "^2.6.10",
    "apollo-link": "^1.2.14",
    "apollo-link-context": "^1.0.20",
    "apollo-link-error": "^1.1.13",
    "apollo-link-http": "^1.5.17",
    "axios": "^0.21.0",
    "core-js": "^3.7.0",
    "env-cmd": "^10.1.0",
    "global": "^4.4.0",
    "graphql": "^15.4.0",
    "graphql-tag": "^2.11.0",
    "quasar": "^1.14.3",
    "vue-i18n": "^8.22.1"
  },
  "devDependencies": {
    "@graphql-codegen/add": "^2.0.1",
    "@graphql-codegen/cli": "^1.19.1",
    "@graphql-codegen/fragment-matcher": "2.0.0",
    "@graphql-codegen/introspection": "1.18.0",
    "@graphql-codegen/typescript": "^1.17.11",
    "@graphql-codegen/typescript-operations": "^1.17.9",
    "@graphql-codegen/typescript-vue-apollo": "^2.2.0",
    "@microsoft/microsoft-graph-types": "^1.26.0",
    "@quasar/app": "^2.1.6",
    "@types/node": "14.14.7",
    "@typescript-eslint/eslint-plugin": "^4.7.0",
    "@typescript-eslint/parser": "^4.7.0",
    "babel-eslint": "^10.0.1",
    "eslint": "7.13.0",
    "eslint-config-prettier": "^6.15.0",
    "eslint-loader": "4.0.2",
    "eslint-plugin-prettier": "^3.1.4",
    "eslint-plugin-vue": "^7.1.0",
    "npm-run-all": "^4.1.5",
    "prettier": "^2.1.1",
    "typescript": "^4.0.5"
  },

[TheJoeSchr]

also encountered it. fixed it by moving to apollo/client v3. see here for migration steps: https://v4.apollo.vuejs.org/migration/

[DarkLite1]

Upgrading to the latest packages and following the Apollo upgrade guide you suggested completely solved all the TS errors we were having. Thank you very much for pointing me in the right direction.

For anyone else having this issue, make sure your package names are correct and the versions are matching. This is a valid example that works:

"@apollo/client": "^3.2.5",
"@apollo/link-context": "^2.0.0-beta.3",
"@apollo/link-error": "^2.0.0-beta.3",
"@vue/apollo-composable": "^4.0.0-alpha.12",
"@vue/composition-api": "1.0.0-beta.19",