Vue Apollo TypeScript报错：ApolloClient缺失wsClient等websocket相关属性

• 根本原因是版本不兼容导致的类型定义不匹配：适配Vue2的vue-apollo v3版本的类型定义要求传入Apollo Client 2.x版本的实例，你代码中导入的@apollo/client是Apollo Client 3.x及以上的版本，3.x版本移除了store、writeData等2.x存在的API，因此TS类型校验不通过。

方案1：版本对齐（推荐，无类型风险） #

如果你使用的是Vue2 + vue-apollo v3技术栈，将Apollo Client降级到2.x版本即可解决问题：

1. 卸载当前的高版本Apollo Client

npm uninstall @apollo/client

2. 安装2.x版本的Apollo Client相关依赖

npm install apollo-client@2 apollo-cache-inmemory apollo-link-http

3. 修改导入和实例化代码适配2.x版本

import ApolloClient from 'apollo-client'
import { InMemoryCache } from 'apollo-cache-inmemory'
import { createHttpLink } from 'apollo-link-http'
import { render } from '@testing-library/vue'
import VueApollo from 'vue-apollo'

const apolloClient = new ApolloClient({
  link: createHttpLink({
    uri: 'http://localhost:4001/graphql',
  }),
  cache: new InMemoryCache({
    addTypename: false,
  }),
})

type ComponentType = Parameters<typeof render>[0]
const renderWithApollo = (Component: ComponentType) =>
  render(Component, undefined, (localVue) => {
    localVue.use(VueApollo)

    return {
      apolloProvider: new VueApollo({ defaultClient: apolloClient }),
    }
  })

方案2：类型断言绕开校验（适合需要保留新版Apollo Client的场景） #

如果你已经确认业务逻辑不需要用到Apollo Client 2.x的专属API，仅需要解决TS报错，可以对apolloClient增加类型断言，强制匹配vue-apollo要求的类型定义：

return {
  apolloProvider: new VueApollo({ 
    defaultClient: apolloClient as unknown as ApolloClient<any> 
  }),
}

注意：该方案仅绕开静态类型校验，如果你用到了vue-apollo依赖Apollo Client 2.x专属API的功能，运行时可能出现报错，需要自行验证功能可用性。

内容的提问来源于stack exchange，提问作者J. Hesters