vuejs / vuejs/apollo

useMutation does not allow late variables with typescript

Open
#910 7 comments 10 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

pending triage
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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.