fix(vue): Fix regression causing variables to not be reactive

[yurks]

Summary

Restore reactivity typings for variables input.

This regression caused a number of issues using graphql-code-generator

Set of changes

Reuse MaybeRef type for variables typing.

[changeset-bot[bot]]

⚠️ No Changeset found

Latest commit: d5bd93101dfdd79ae52e8adbaa4b8fee0f0e4ad2

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[JoviDeCroock]

Darn I missed that this doesn't have a changeset, do you mind adding one or should I? More info here or the bot comment above

[yurks]

Darn I missed that this doesn't have a changeset, do you mind adding one or should I? More info here or the bot comment above

thanks, will do within another PR

[JoviDeCroock]

Pushed a changeset so I can add it to a release @yurks

[yurks]

@JoviDeCroock just prepared the same, but too late) Thanks!

[negezor]

Now it breaks down queries that don't have variables:

error TS2345: Argument of type '{}' is not assignable to parameter of type 'Omit<UseQueryArgs<never, Exact<{ [key: string]: never; }>>, "query">'.
  Property 'variables' is missing in type '{}' but required in type 'Omit<UseQueryArgs<never, Exact<{ [key: string]: never; }>>, "query">'.

29 const { data } = useFetchUserProvidersQuery({});
                                               ~~

  node_modules/@urql/core/dist/urql-core-chunk.d.ts:848:5
    848     variables: Variables;
            ~~~~~~~~~
    'variables' is declared here.

[yurks]

@negezor you are using codegen, and that's a typing issue in @graphql-codegen/typescript-vue-urql. There was an attempt to fix typings according urql-vue types refactor someday, but it was done incorrectly, as variables lost reactivity.

If you can try to use urql-vue methods directly, you'll see empty variables working as expected.

A bit more mess: based on your example you're using useFetchUserProvidersQuery({}), where {} is kind of workaround. With urql-vue@1.0.4 it worked just like useFetchUserProvidersQuery(), which is correct.

Looks like we are using the same stack, so I can recommend you temporary resolve this issue with useFetchUserProvidersQuery({ variables: {}}), until @graphql-codegen/typescript-vue-urql will be fixed.