阿波罗TypeScript: ApolloClient缺少websocket属性

Question

我正在尝试用Vue测试库和Apollo建立一个组件测试，如他们的例子所述。

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怎么能错过这些类型，我怎么给它这些属性?感觉好像我漏掉了配置。

Answer 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 }),
}
})