Vue Apollo TypeScript: в ApolloClient отсутствуют свойства веб-сокета

Question

Я пытаюсь настроить компонентный тест с помощью Vue Testing Library и 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 }),
    }
  })