Vue-apollo: Upgrade to @apollo/client v3

[geekox86]

Any near plans to upgrade to @apollo/client v3 ? Allow beta versions?

Thank you!

[geekox86]

Greetings all. Where do we stand for this important upgrade? Is it expected in Q1 2020?

[geekox86]

Hello guys. Thank you a million for this great library.

Any good news regarding allowing preview versions of @apollo/client v3?

[nadilas]

Have you tried it @geekox86? Without looking at the source, is there any reason why it shouldn't work out of the box?

[geekox86]

@nadilas Hi. I tried it and it works actually. However, I get a lot of typing errors from TS:

yarn run v1.22.4
$ vue-cli-service serve
 INFO  Starting development server...
Starting type checking service...
Using 1 worker with 2048MB memory limit

DONE  Compiled successfully in 27123ms                                                                                                   4:27:58 PM

ERROR in /Users/geekox86/Documents/GitHub/OeMis/node_modules/@vue/apollo-composable/dist/useApolloClient.d.ts(1,26):
1:26 Cannot find module 'apollo-client'.
  > 1 | import ApolloClient from 'apollo-client';
      |                          ^
    2 | export declare const DefaultApolloClient: unique symbol;
    3 | export declare const ApolloClients: unique symbol;
    4 | export interface UseApolloClientReturn<TCacheShape> {
ERROR in /Users/geekox86/Documents/GitHub/OeMis/node_modules/@vue/apollo-composable/dist/useMutation.d.ts(2,53):
2:53 Cannot find module 'apollo-client'.
    1 | import { DocumentNode } from 'graphql';
  > 2 | import { MutationOptions, OperationVariables } from 'apollo-client';
      |                                                     ^
    3 | import { Ref } from '@vue/composition-api';
    4 | import { FetchResult } from 'apollo-link';
    5 | import { ReactiveFunction } from './util/ReactiveFunction';
ERROR in /Users/geekox86/Documents/GitHub/OeMis/node_modules/@vue/apollo-composable/dist/useMutation.d.ts(45,340):
45:340 Type 'MutateWithRequiredVariables<TResult, TVariables>' does not satisfy the constraint 'MutateWithOptionalVariables<TResult, TVariables>'.
  Types of parameters 'variables' and 'variables' are incompatible.
    Type 'TVariables | undefined' is not assignable to type 'TVariables'.
      'TVariables | undefined' is assignable to the constraint of type 'TVariables', but 'TVariables' could be instantiated with a different subtype of constraint 'any'.
        Type 'undefined' is not assignable to type 'TVariables'.
          'undefined' is assignable to the constraint of type 'TVariables', but 'TVariables' could be instantiated with a different subtype of constraint 'any'.
    43 |  * Use a mutation with variables, but without a default.
    44 |  */
  > 45 | export declare function useMutation<TResult = any, TVariables extends OperationVariables = OperationVariables>(document: DocumentNode | ReactiveFunction<DocumentNode>, options?: UseMutationOptionsNoVariables<TResult, undefined> | ReactiveFunction<UseMutationOptionsNoVariables<TResult, undefined>>): UseMutationReturn<TResult, TVariables, MutateWithRequiredVariables<TResult, TVariables>>;
       |                                                                                                                                                                                                                                                                                                                                                    ^
    46 | export {};
    47 | 
ERROR in /Users/geekox86/Documents/GitHub/OeMis/node_modules/@vue/apollo-composable/dist/useQuery.d.ts(3,156):
3:156 Cannot find module 'apollo-client'.
    1 | import { Ref } from '@vue/composition-api';
    2 | import { DocumentNode } from 'graphql';
  > 3 | import { OperationVariables, WatchQueryOptions, ObservableQuery, ApolloQueryResult, SubscribeToMoreOptions, FetchMoreQueryOptions, FetchMoreOptions } from 'apollo-client';
      |                                                                                                                                                            ^
    4 | import { ReactiveFunction } from './util/ReactiveFunction';
    5 | export interface UseQueryOptions<TResult = any, TVariables = OperationVariables> extends Omit<WatchQueryOptions<TVariables>, 'query' | 'variables'> {
    6 |     clientId?: string;
ERROR in /Users/geekox86/Documents/GitHub/OeMis/node_modules/@vue/apollo-composable/dist/useSubscription.d.ts(3,57):
3:57 Cannot find module 'apollo-client'.
    1 | import { DocumentNode } from 'graphql';
    2 | import { Ref } from '@vue/composition-api';
  > 3 | import { OperationVariables, SubscriptionOptions } from 'apollo-client';
      |                                                         ^
    4 | import { Observable } from 'apollo-client/util/Observable';
    5 | import { FetchResult } from 'apollo-link';
    6 | import { ReactiveFunction } from './util/ReactiveFunction';
ERROR in /Users/geekox86/Documents/GitHub/OeMis/node_modules/@vue/apollo-composable/dist/useSubscription.d.ts(4,28):
4:28 Cannot find module 'apollo-client/util/Observable'.
    2 | import { Ref } from '@vue/composition-api';
    3 | import { OperationVariables, SubscriptionOptions } from 'apollo-client';
  > 4 | import { Observable } from 'apollo-client/util/Observable';
      |                            ^
    5 | import { FetchResult } from 'apollo-link';
    6 | import { ReactiveFunction } from './util/ReactiveFunction';
    7 | export interface UseSubscriptionOptions<TResult = any, TVariables = OperationVariables> extends Omit<SubscriptionOptions<TVariables>, 'query' | 'variables'> {
ERROR in /Users/geekox86/Documents/GitHub/OeMis/src/Assessment/Mutations.ts(30,13):
30:13 Argument of type '{ update: (cache: any, result: any) => void; }' is not assignable to parameter of type 'Pick<UseMutationOptions<any, any>, "update" | "context" | "optimisticResponse" | "updateQueries" | "refetchQueries" | "awaitRefetchQueries" | "errorPolicy" | "fetchPolicy" | "clientId">'.
  Type '{ update: (cache: any, result: any) => void; }' is missing the following properties from type 'Pick<UseMutationOptions<any, any>, "update" | "context" | "optimisticResponse" | "updateQueries" | "refetchQueries" | "awaitRefetchQueries" | "errorPolicy" | "fetchPolicy" | "clientId">': context, optimisticResponse, updateQueries, refetchQueries, and 3 more.
    28 |         mutation.mutate(
    29 |             { type, organizationId },
  > 30 |             {
       |             ^
    31 |                 update: (cache, result) => {
    32 |                     cache.writeQuery({
    33 |                         query: assessmentQuery,
ERROR in /Users/geekox86/Documents/GitHub/OeMis/src/Assessment/Mutations.ts(31,26):
31:26 Parameter 'cache' implicitly has an 'any' type.
    29 |             { type, organizationId },
    30 |             {
  > 31 |                 update: (cache, result) => {
       |                          ^
    32 |                     cache.writeQuery({
    33 |                         query: assessmentQuery,
    34 |                         variables: { id: result.data.assessment.id },
ERROR in /Users/geekox86/Documents/GitHub/OeMis/src/Assessment/Mutations.ts(31,33):
31:33 Parameter 'result' implicitly has an 'any' type.
    29 |             { type, organizationId },
    30 |             {
  > 31 |                 update: (cache, result) => {
       |                                 ^
    32 |                     cache.writeQuery({
    33 |                         query: assessmentQuery,
    34 |                         variables: { id: result.data.assessment.id },
Version: typescript 3.8.3
Time: 12788ms

[geekox86]

I used this shim.ts and all errors are gone except this one which I will try to patch similarly:

declare module 'apollo-*' {
    export { ApolloClient as default } from '@apollo/client/core'
    export * from '@apollo/client/core'
    export * from '@apollo/client/utilities'
}

[cheungpat]

Upgrading to @apollo/client v3 doesn’t work for me.

vue-apollo calls ObservableQuery.currentResult() which is removed in https://github.com/apollographql/apollo-client/commit/b0530027653d5bfccdddf585279192c22c326826. It has been renamed as ObservableQuery.getCurrentResult() since https://github.com/apollographql/apollo-client/commit/cc3706ee76c0de7d56a7936a80ec6e6b96417520.

The lines that calls currentResult() are:

https://github.com/vuejs/vue-apollo/blob/v3.0.3/packages/vue-apollo/src/smart-query.js#L131
https://github.com/vuejs/vue-apollo/blob/v3.0.3/packages/vue-apollo/src/smart-query.js#L202

[Tchoupinax]

Hello 👋

Any update about this ?
FYI, apollo-client has migrated to @apollo-client, so the current used package is outdated.

[Arsync]

While using @apollo/client with vue-apollo and TypeScript, there is a type definition errors:

vue-apollo/types/apollo-provider.d.ts(4,30):
TS2307: Cannot find module 'apollo-client' or its corresponding type declarations.

vue-apollo/types/options.d.ts(12,8):
TS2307: Cannot find module 'apollo-client' or its corresponding type declarations.

vue-apollo/types/options.d.ts(13,29):
TS2307: Cannot find module 'apollo-link' or its corresponding type declarations.

vue-apollo/types/options.d.ts(14,47):
TS2307: Cannot find module 'apollo-link-http-common' or its corresponding type declarations.

vue-apollo/types/vue-apollo.d.ts(11,8):
TS2307: Cannot find module 'apollo-client' or its corresponding type declarations.

vue-apollo/types/vue-apollo.d.ts(12,29):
TS2307: Cannot find module 'apollo-link' or its corresponding type declarations.

vue-apollo/types/vue-apollo.d.ts(13,28):
TS2307: Cannot find module 'apollo-client/util/Observable' or its corresponding type declarations.

[victororlyk]

when trying use vue3 apollo and ts I am getting an error

Argument type unique symbol (for 'DefaultApolloClient' in useApolloClient.d.ts) is not assignable to parameter type InjectionKey<ApolloClient<NormalizedCacheObject>> | string | number

with this code

import { createApp, provide, h } from "vue";
import { VuelidatePlugin } from "@vuelidate/core";
import {
  ApolloClient,
  createHttpLink,
  InMemoryCache
} from "@apollo/client/core";
import { DefaultApolloClient } from '@vue/apollo-composable'

import i18n from "./i18n";
import App from "./App.vue";
import "./registerServiceWorker";
import router from "./router";
import store from "./store";
import "./main.css";

const httpLink = createHttpLink({
  uri: "http://localhost:3020/graphql"
});
const cache = new InMemoryCache();
const defaultClient = new ApolloClient({
  link: httpLink,
  cache
});

const app = createApp({
  setup() {
    provide(DefaultApolloClient, defaultClient)
  },
  render(){
   return h(App)
  }
});
app.use(i18n);
app.use(store);
app.use(router);
app.use(VuelidatePlugin);
app.mount("#app");

shims

declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}

declare module 'apollo-*' {
  export { ApolloClient as default } from '@apollo/client/core'
  export * from '@apollo/client/core'
  export * from '@apollo/client/utilities'
}