Блог

Я пытаюсь настроить компонентный тест с помощью библиотеки тестирования 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 = Parameterslt;typeof rendergt;[0] const renderWithApollo = (Component: ComponentType) =gt;  render(Component, undefined, (localVue) =gt; {  localVue.use(VueApollo)   return {  apolloProvider: new VueApollo({ defaultClient: apolloClient }),  }  })  

Однако, когда я это делаю, TypeScript кричит о defaultClient следующей ошибке:

 Type 'ApolloClientlt;NormalizedCacheObjectgt;' is missing the following properties from type 'ApolloClientlt;anygt;': 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: ApolloClientlt;anygt;; defaultOptions?: VueApolloComponentOptionslt;Vuegt; | undefined; clients?: { [key: string]: ApolloClientlt;anygt;; } | undefined; watchLoading?: WatchLoading | undefined; errorHandler?: ErrorHandler | undefined; prefetch?: boolean | undefined; }'  

Как АполлоКлиент может пропустить эти типы и как я могу придать ему эти свойства? Такое чувство, что мне не хватает конфигураций.

Я узнал, что у меня пропала 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 = Parameterslt;typeof rendergt;[0] const renderWithApollo = (Component: ComponentType) =gt;  render(Component, undefined, (localVue) =gt; {  localVue.use(VueApollo)   provideApolloClient(apolloClient)   return {  // @ts-ignore  apolloProvider: new VueApollo({ defaultClient: apolloClient }),  }  })