Reactive variables not passing to mutation when using options API /w Vue 3

[patrickblackjr]

Describe the bug
Reactive variables are not passing to mutation when using options API /w Vue 3.

To Reproduce
Steps to reproduce the behavior:

login() {
      this.$apollo.mutate({
        mutation: gql`
          mutation Login($username: String!) {
            login(username: $username) {
              token
              user {
                id
                name
                email
                username
                role
              }
            }
          }
        `,
        variables() {
          return {
            username: this.username,
          }
        },
      })
    },

Create a method, something like the above. Be sure to define the the username variable in data.

See that on the request, the variable is not included.

This works fine if I statically define the variable, or use the composition API, or use the Apollo Explorer to run the same query.

Versions
vue: 3.2.32
@vue/apollo-option: 4.0.0-alpha.16
@apollo/client: 3.5.10

Additional context
Add any other context about the problem here.

[Akryum]

Your issue is that you put variables as a function, it should be similar to:

variables: {
  username: this.username,
},

[patrickblackjr]

Per the docs this is required to make variables reactive...what am I missing?

I tried it the way you mentioned as well with the same result.

[Akryum]

You are looking at the doc to make queries, not mutations 🐱

[patrickblackjr]

🤦🏻‍♂️ oh wow. not sure how i missed that. thanks so much

On Fri, Apr 15, 2022 at 8:43 AM Guillaume Chau ***@***.***> wrote: You are looking at the doc to make queries, not mutations 🐱 — Reply to this email directly, view it on GitHub <#1349 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ADFKYDRWTRYBLVLD3NWVXDDVFFXBDANCNFSM5TPXOWJA> . You are receiving this because you authored the thread.Message ID: ***@***.***>

-- Thank you, Patrick Black Jr