How to use in a project that is setup using Vue CLI@3 and TypeScript?

Question

td;dr How do I include vue-apollo in a project that already uses TypeScript?

I created a fresh vue project using vue cli@3 and using TS.

Then I added the vue-apollo plugin which modified my main.ts file to add

apolloProvider: createProvider(),

in the vue instance creation.

But the compiler complains about this.

Argument of type '{ router: VueRouter; store: Store<{}>; apolloProvider: { provide: () => {}; }; render: (h: CreateElement) => VNode; }' is not assignable to parameter of type 'ComponentOptions, DefaultMethods, DefaultComputed, PropsDefinition>, Record>'.

Object literal may only specify known properties, and 'apolloProvider' does not exist in type 'ComponentOptions, DefaultMethods, DefaultComputed, PropsDefinition>, Record>'. [2345]

I can see that there is a types directory in the vue-apollo package I fetched from npm but not sure how to use them.

I also get the following

[ts] Could not find a declaration file for module '@/vue-apollo'. '/Users/praveen/code/voicezen/repos/voicezen-ui/src/vue-apollo.js' implicitly has an 'any' type. [7016]

for the following import in main.ts

import { createProvider } from '@/vue-apollo';

I get that this might be coming from the noImplicitAny rule but then changing the generated vue-apollo.js to vue-apollo.ts also doesn't solve the problems.

Changing it to .ts removes the compiler errors from main.ts about the above two but then I get the following.

Could not find a declaration file for module 'vue-cli-plugin-apollo/graphql-client'. '/Users/praveen/code/voicezen/repos/voicezen-ui/node_modules/vue-cli-plugin-apollo/graphql-client/index.js' implicitly has an 'any' type.

for

import {
  createApolloClient,
  restartWebsockets
} from 'vue-cli-plugin-apollo/graphql-client';

To fix this, I can add a module declaration in my typings like this but is that the right way?

declare module 'vue-cli-plugin-apollo/graphql-client';

The onLogin or onLogout method param apolloClient, in the generated vue-apollo.ts starts complaining about them being implicitly any type too.

Answer 1

You were on the right track, change vue-apollo.js to .ts

And then add 'vue-cli-plugin-apollo' to types in 'tsconfig.