td;dr
How can I integrate vue-apollo into an existing TypeScript project?
I initialized a new Vue project using vue cli@3 with TypeScript.
Afterwards, I installed the vue-apollo plugin which automatically updated my main.ts file to include
apolloProvider: createProvider(),
during the creation of the Vue instance. However, this resulted in compiler errors.
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>'.
The object literal can only specify known properties, and 'apolloProvider' is not recognized in type 'ComponentOptions, DefaultMethods, DefaultComputed, PropsDefinition>, Record>'. [2345]
I noticed that there are type definitions in the types directory of the vue-apollo package I installed from npm, but I'm unsure how to utilize them.
Additionally, I encountered the following error:
[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]
regarding the import statement in main.ts
import { createProvider } from '@/vue-apollo';
This issue might be related to the noImplicitAny rule, however changing the generated vue-apollo.js to vue-apollo.ts did not resolve the problems.
Switching it to .ts removed the compiler errors in main.ts related to the aforementioned issues, but triggered another problem.
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 address this, I could add a module declaration in my typings as follows, but I am uncertain if this is the correct approach.
declare module 'vue-cli-plugin-apollo/graphql-client';
The onLogin or onLogout method's parameter apolloClient, in the generated vue-apollo.ts also starts showing implicit any type warnings.