[@urql/vue] Cannot use useQuery inside of vue-router guard

[leonidk101]

Describe the bug

The setup: There's a pinia store that is used in a router guard, the store uses useQuery composable from @urql/vue

Because it tried to access vue instance in router guard the app returns the following error:

use* functions may only be called during the `setup()` or other lifecycle hooks.

As far as I can see the error comes from

urql/packages/vue-urql/src/useClient.ts

Line 104 in 25d114d

'use* functions may only be called during the `setup()` or other lifecycle hooks.'

Am I doing something wrong?

Reproduction

https://stackblitz.com/edit/vitejs-vite-kudyigng

Urql version

@urql/vue v1.4.2

Validations

• I can confirm that this is a bug report, and not a feature request, RFC, question, or discussion, for which GitHub Discussions should be used
• Read the docs.
• Follow our Code of Conduct

[arkandias]

I encountered this issue when trying to use useQuery in a composable. Maybe I'm missing something too. Otherwise, it seems to me that it would contradict Composition API pattern.

Could you use useClientHandle instead? This one works outside components, but it is intended for one shot queries...