Vue Apollo TypeScript：ApolloClient 缺少 websocket 属性

Posted 2023-03-10

【中文标题】Vue Apollo TypeScript：ApolloClient 缺少 websocket 属性

【英文标题】：Vue Apollo TypeScript: ApolloClient is missing websocket properties

【发布时间】：2021-12-10 20:11:08

【问题描述】：

我正在尝试使用 Vue 测试库和 Apollo 设置组件测试，如 their example 中所述。

import  ApolloClient, InMemoryCache  from '@apollo/client'
import  render  from '@testing-library/vue'
import VueApollo from 'vue-apollo'

const apolloClient = new ApolloClient(
  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 ),
    
  )

但是，当我这样做时，TypeScript 大喊 defaultClient 并出现以下错误：

Type 'ApolloClient<NormalizedCacheObject>' is missing the following properties from type 'ApolloClient<any>': store, writeData, initQueryManager, wsClientts(2739)
apollo-provider.d.ts(16, 5): The expected type comes from property 'defaultClient' which is declared here on type ' defaultClient: ApolloClient<any>; defaultOptions?: VueApolloComponentOptions<Vue> | undefined; clients?:  [key: string]: ApolloClient<any>;  | undefined; watchLoading?: WatchLoading | undefined; errorHandler?: ErrorHandler | undefined; prefetch?: boolean | undefined; '

ApolloClient 怎么会错过这些类型，我该如何赋予它这些属性？感觉好像我缺少配置。

【参考方案1】：

我发现我缺少link 属性，我不得不致电provideApolloClient：

import  ApolloClient, InMemoryCache, HttpLink  from '@apollo/client'
import  render  from '@testing-library/vue'
import fetch from 'cross-fetch'
import  provideApolloClient  from '@vue/apollo-composable'

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

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

    provideApolloClient(apolloClient)

    return 
      // @ts-ignore
      apolloProvider: new VueApollo( defaultClient: apolloClient ),
    
  )