typescript-vue-urql generate an error type in hooks

[albertcito]

This is my codegen to get the vue hook ready to use in my code:

const config: CodegenConfig = {
  schema: 'https://countries.trevorblades.com/',
  documents: ['graphql/resolvers/**/*.ts'],
  ignoreNoDocuments: true, // for better experience with the watcher
  generates: {
    'graphql/generated/graphql.ts': {
      config: {
        withComposition: true,
      },
      plugins: [
        'typescript',
        'typescript-operations',
        //'typescript-urql',
        'typescript-vue-urql',
      ],
    },
    'graphql/generated/graphql.schema.ts': {
      plugins: [
        'urql-introspection',
      ],
    },
  },
};

It generated the graphql functions and types. But it generate a hooks with a type issue:

Hook created:

export function useAllCountriesQuery(options: Omit<Urql.UseQueryArgs<never, AllCountriesQueryVariables>, 'query'> = {}) {
  return Urql.useQuery<AllCountriesQuery>({ query: AllCountriesDocument, ...options });
};

Issue:

Argument of type '{ variables?: Exact<{ filter?: InputMaybe | undefined; }> | globalThis.Ref<Exact<{ filter?: InputMaybe | undefined; }> | undefined> | globalThis.Ref<...> | undefined; requestPolicy?: MaybeRef$1<...> | undefined; context?: MaybeRef$1<...> | undefined; pause?: MaybeRef$1<...> | ...' is not assignable to parameter of type 'UseQueryArgs<AllCountriesQuery, AnyVariables>'.
Type '{ variables?: Exact<{ filter?: InputMaybe | undefined; }> | globalThis.Ref<Exact<{ filter?: InputMaybe | undefined; }> | undefined> | globalThis.Ref<...> | undefined; requestPolicy?: MaybeRef$1<...> | undefined; context?: MaybeRef$1<...> | undefined; pause?: MaybeRef$1<...> | ...' is not assignable to type '{ requestPolicy?: MaybeRef$1 | undefined; context?: MaybeRef$1<Partial> | undefined; pause?: MaybeRef$1<...> | undefined; } & MaybeRefObj$1<...>'.
Type '{ variables?: Exact<{ filter?: InputMaybe | undefined; }> | globalThis.Ref<Exact<{ filter?: InputMaybe | undefined; }> | undefined> | globalThis.Ref<...> | undefined; requestPolicy?: MaybeRef$1<...> | undefined; context?: MaybeRef$1<...> | undefined; pause?: MaybeRef$1<...> | ...' is not assignable to type 'MaybeRefObj$1<{ query: DocumentInput<AllCountriesQuery, AnyVariables>; variables: AnyVariables; }>'.
Property 'variables' is optional in type '{ variables?: Exact<{ filter?: InputMaybe | undefined; }> | Ref<Exact<{ filter?: InputMaybe | undefined; }> | undefined> | Ref<...> | undefined; requestPolicy?: MaybeRef$1<...> | undefined; context?: MaybeRef$1<...> | undefined; pause?: MaybeRef$1<...> | undefined; query: Docu...' but required in type 'MaybeRefObj$1<{ query: DocumentInput<AllCountriesQuery, AnyVariables>; variables: AnyVariables; }>'.ts(2345)

I don't know how to solve it or if it's a codegen issue. Help me please. I need to use typescript-vue-urql because it is connected to the nuxt3 provider.

I created an repository example here you can use to replicate this issue.

[kitten]

The types in all urql bindings aren't that simple anymore, so old GCG generators that "wrap" functions like useQuery aren't always going to just work. Basically, we've got types now that make the variables property optional when all variables of a given query are nullable or when the query doesn't accept variables.

I'd recommend however not to try to solve this and not to generate wrapper hooks at all.

Instead, it's recommended to switch to a GCG output that generates TypedDocumentNode, since this has the advantage of working with every urql API that accepts a query and also encourages you to make use of fragments locally.

This is further explained here: https://formidable.com/open-source/urql/docs/basics/typescript-integration/

[albertcito]

I have a whole project using generated hooks, now I'll have to refactor them all. But why if I use typescript-urql plugin it works properly, but if I use typescript-vue-urql it doesn't work. Also if now generated hooks doesn't work properly for typescript-vue-urql Why that option is on the documentation in codegen. Should it be removed?

[kitten]

That's not our documentation, so I couldn't tell you. We also never recommended to generate wrapper hooks/functions, ever 😅 It's generally something I never recommended and we didn't even document TypedDocumentNode in our docs until recently (although it's been supported for a long time).

While we're working on our own tooling, which isn't ready yet, we can really only recommend any TypedDocumentNode tooling for now, and that tooling will also be based on outputting TypedDocumentNode-based typings.

If you have questions for the GCG team, then I'd recommend you to go to them and ask whether this package is even still supported. Just mind you, a lot of their packages have been deprecated, and even if they're not, packages like typescript-vue-urql are not official, and — in all likelihood — have additionally been contributed to GCG by external contributors, and haven't been maintained since 😅