@vue/apollo-composable incompatible with Apollo Client v4

[mustanggb]

Describe the bug
@vue/apollo-composable@4.2.2 is incompatible with @apollo/client@4.x.

To Reproduce
Steps to reproduce the behavior:

1. Install @vue/apollo-composable@4.2.2 and @apollo/client@4.0.0.
2. Import and use @vue/apollo-composable in a Vue 3 component.
3. Run yarn build.
4. See the error:

"ApolloError" is not exported by "@apollo/client/legacyEntryPoints/core/index.js", imported by "@vue/apollo-composable/dist/index.mjs"`

Expected behavior
Build succeeds.

Versions

• vue: 3.x
• vue-apollo: 4.2.2
• @apollo/client: 4.x

Additional context
None.

[GullmeVrn]

So, wich version of @apollo/client is compatible with vue-apollo: ^4.2.2?

[stephenjason89]

@GullmeVrn It works fine with @apollo/client v3.
If you want to use v4 with @vue/apollo-composable, you’ll need a small shim so it can resolve ApolloError / isApolloError (since the composable expects them from v4).

// apollo-v4-compat.ts
export class ApolloError extends Error {
	public graphQLErrors: any[]
	public clientErrors: any[]
	public networkError: any
	public extraInfo: any

	constructor(opts: {
		graphQLErrors?: any[]
		clientErrors?: any[]
		networkError?: any
		errorMessage?: string
		extraInfo?: any
	}) {
		super(opts.errorMessage || 'Apollo Client Error')
		this.name = 'ApolloError'
		this.graphQLErrors = opts.graphQLErrors ?? []
		this.clientErrors = opts.clientErrors ?? []
		this.networkError = opts.networkError
		this.extraInfo = opts.extraInfo
	}
}

export function isApolloError(err: unknown): err is ApolloError {
	return err instanceof ApolloError
}

then create an alias for vite

vite: {
		resolve: {
			alias: {
				'@apollo/client/core/index.js': fileURLToPath(
					new URL('./shims/apollo-v4-compat.ts', import.meta.url),
				),
			},
		},
}

Once @vue/apollo-composable adds native support for v4, you can safely remove the shim and vite alias.

[dominikklein]

But I think there are also other depreactions or? For example:

apollo/packages/vue-apollo-composable/src/useQuery.ts

Line 413 in fb027e6

const lastResult = query.value.getLastResult()

[tobiasdiez]

I also get a bunch of typescript errors related to the options parameter of useMutation etc. For example:

Object literal may only specify known properties, and 'update' does not exist in type 'OptionsParameter<LoginMutation, Exact<{ input: LoginInput; }>>'.

Is there a workaround for this (except of course disabling typechecking for those lines)?

[jay-zahiri]

+1

[adarshotto]

+1

[bmulholland]

For those of you who are +1'ing this, the best way to get what you want is right here: https://github.com/sponsors/Akryum

[jay-zahiri]

For those of you who are +1'ing this, the best way to get what you want is right here: https://github.com/sponsors/Akryum

How is that link solving this specific issue? The link goes to a sponsorship payment page? Or am I missing something?

[bmulholland]

Yes, exactly: it's the sponsorship for the project's maintainer.

[jay-zahiri]

Right... You know +1'ing isn't a "gun to your head, fix it now" type of thing, right? Just a way for users to voice their feedback on what issues they think hopefully should be more prioritized. Down-thumbing every +1 and answering with a link for payment feels kind of aggressive to user engagements and a bit of a bummer approach for a OSS project, imo 🤷‍♂️ And again, isn't really relevant for solving this issue either.

[paltman]

@Akryum Just realized we weren't sponsoring you (Wedgworth's, Inc). Just added a monthly sponsorship. Appreciate and rely on the great work you are doing.

That is a true sponsorship. Not a transaction for help on this issue.

That said, I have a lot of interest in this one so if it's all the same to you versus other competing priorities, I just wanted to register my interest.

I'm much more a Python programmer than JS/TS but maybe with some pointers, I could take a stab at a PR.

Thanks!

[guendev]

This package usually takes quite a while to catch up with the official Apollo releases.
Currently, I need to use some features from Apollo Client v4, and I’d prefer to avoid another migration later on, so I’ve created https://vue3-apollo.guen.dev/.
Feel free to check it out while waiting for an official update — it’s brand new, so there might still be some bugs I haven’t caught yet 😅
Also, I’m currently sponsoring you to hopefully help speed up the update process for this library. 🙌

[hillel-studios]

+1

[Akryum]

A new major is coming with compatibility with Apollo Client 4