TypeScript requiring variables based on types in v4 has incorrect behavior

[bbugh]

Describe the bug

While recently working with the author of the vue-apollo-composable generator for graphql-code-generator I discovered that I made a bad assumption while bolting-on the types for v4 in #895.

That assumption was that you can use the types to determine if variables are required or not. This is wrong, because all of the GraphQL variables may be all optional, which means that requiring variables is incorrect TypeScript behavior.

The unfortunate side effect of this is that people using the raw composition API will not get type check warnings if they forget to specify variables, though it will correctly type check the variables if it is specified. That's a bummer, but it can be resolved something like the graphql-code-generator to create wrapper hooks that ensure that the hook functions expect the correct inputs.

Fixing this issue would also have a benefit of simplifying the Frankenstein of types, and fix a few issues that I listed at the bottom.

I will submit a PR for this ASAP. PR fix #962 created

To Reproduce
Given this query with optional arguments:

query projects($text: String) {
  projects(text: $text) {
    id
  }
}

And this vue-apollo-composable code:

  return VueApolloComposable.useQuery<ProjectsQuery, ProjectsQueryVariables>(
    ProjectsDocument,
    variables,
    options
  );

Variables is actually optional here, but the typing makes it required.

Expected behavior

At all times in the API, we must allow variables to be undefined, regardless of how it is typed. This will just have to be a shortcoming of the TypeScript typing.

Versions
@vue/apollo-composable: 4.0.0-alpha.8

Additional context

I believe this would resolve these issues:

• Type 'undefined' is not assignable to baseOptions dotansimha/graphql-code-generator#3679
• Type MutateWithRequiredVariables does not satisfy the constraint MutateWithOptionalVariables #948
• Use MutateWithOptionalVariables for mutations without default values #955
• Incomplete typings for UseMutationReturn on @vue/apollo-composable #921 Not related

[cerinoligutom]

+1

Edit:
Just started using this, the logs are so annoying to look at right now.

Edit 2:
I cannot build the app bootstrapped with vue cli.