typescript-vue-urql typing issue with generated code

[kefniark]

Which packages are impacted by your issue?

@graphql-codegen/typescript-vue-urql

Describe the bug

The issue I'm running into is that the code generated by typescript-vue-urql is not compatible with recent version of @urql/vue. Apparently one of the property variables is optional in the generated code, but not for @urql/vue, causing some typescript errors.

I'm ignoring this issue for months by just not bumping urql version, but now I need to update and I running into this codegen issue once again.

Your Example Website or App

https://github.com/kefniark/issue-codegen-urql-vue

Steps to Reproduce the Bug or Issue

Please check the Readme.md

• yarn : install deps
• yarn generate : use codegen to generate client code
• yarn test : validate the client code

Expected behavior

The generated code should match @urql/vue typings.

Screenshots or Videos

Platform

• OS: Windows, Linux
• NodeJS: 18

in the reproduction repository everything is freshly installed and up-to-date (codegen, typescript, urql)

[DevelonPro]

Can confirm with typescript-urql as well, this is an issue for me.

Seems like the urql developers were aware that this would break in codegen according to this: https://github.com/urql-graphql/urql/issues/2606#issue-1337901823

[TimoStolz]

+1

[TimoStolz]

@DevelonPro, @kefniark: Do you know a workaround until it is fixed?

[kefniark]

Sadly, except using older version of urql, not really

[TimoStolz]

For further reference, this bug was also reported as issue #328 in dotansimha/graphql-code-generator-community with a PR that resolves the issue. This could serve as a workaround.

[TimoStolz]

The relevant change in urql is reported here: https://github.com/urql-graphql/urql/pull/2607

[xmimiex]

Hello, any news ?

[kefniark]

Sadly not much, It's still in graphql-code-generator PR ... 😮‍💨 It looks like it's really just missing someone to merge and publish. So frustrating to see a basic type issue taking so long for no apparent reason.

[michael-pattern]

It looks like this is now available as an alpha release https://www.npmjs.com/package/@graphql-codegen/typescript-vue-urql/v/3.0.0-alpha-20230911210300-bd6b199b9

Only problem is that typing is not fixed for Subscriptions

export function useFoobarSubscription<R = FoobarSubscription>(options: Omit<Urql.UseSubscriptionArgs<never, FoobarSubscriptionVariables>, 'query'> = {}, handler?: Urql.SubscriptionHandlerArg<FoobarSubscription, R>) {
  return Urql.useSubscription<FoobarSubscription, R, FoobarSubscriptionVariables>({ query: FoobarDocument, ...options }, handler);
};

Property 'variables' is missing in type '{}' but required in type 'Omit<UseSubscriptionArgs<never, Exact<{ foobar: Foobar; }>>, "query">'

[semanser]

I had the same issue (with subscriptions in particular) but it got resolved after I updated to the latest versions. So make sure that you're on the latest version.

@graphql-codegen/typescript from 2.7.3 to 4.0.2
@graphql-codegen/typescript-urql from 3.6.4 to 4.0.0
@graphql-codegen/introspection from 2.2.1 to 4.0.1
@graphql-codegen/typescript-operations from 2.5.3 to 4.1.0
@graphql-codegen/cli from 2.11.6 to 5.0.1
@graphql-codegen/urql-introspection from 2.2.1 to 3.0.0

[mwahlhuetter]

@semanser Can not confirm. Still a problem for subscriptions that have variables with the latest version.

[michael-pattern]

Also can not confirm, this problem is still persistent. This is relevant to subscriptions. I tested today using

@graphql-codegen/cli 5.0.2
@graphql-codegen/typescript 4.0.6
@graphql-codegen/typescript-operations 4.2.0
@graphql-codegen/typescript-vue-urql 3.0.0

[michael-pattern]

As of @graphql-codegen/typescript-vue-urql@3.1.0 this appears to be fixed!

[Ivan8R]

This issue not fixed in 3.1.0