useMutation does not allow late variables with typescript
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 6k
- Forks
- 516
- PR merge metrics
- No merged PRs in 30d
Description
Describe the bug
In the docs it's stated that you can either directly pass variables to useMutation or pass them once you call the resulting mutate function.
With Typescript, as soon as you specify two type arguments to useMutation, it expects you to pass variables directly to useMutation. It does not allow adding them later, which seems to be a bug to me.
Also, if you just supply one type argument to useMutation, the parameter variables of the resulting mutate function is undefined, not allowing any kind of variables. (Which is expected and correct, I guess)
To Reproduce
import { createComponent, ref } from '@vue/composition-api';
import { useMutation } from '@vue/apollo-composable';
type LoginMutation = {}
type LoginMutationVariables = {
variable: string,
}
export default createComponent({
setup() {
// FAILS HERE: Expected 2 arguments, but got 1.
const { mutate: login } = useMutation<LoginMutation, LoginMutationVariables>(Login);
// Require variables here, since they're not passed before? Not sure if possible.
login({
variable: 'Hello World',
});
}
});
Expected behavior
Allow useMutation with 2 type parameters to accept variables at a later point.
Versions
vue: vue@2.6.11
vue-apollo: vue-apollo@3.0.2
apollo-client: apollo-client@2.6.8
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start at the TypeScript definition and overloads for the useMutation entry point, then reproduce the example with two type parameters. Check how variables are typed when passed to the returned login function. Done means the shown late-variable call type-checks while preserving the documented direct-variable usage.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- graphql, typescript
- Domain
- api, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100