variables not being sent with the mutation

[smolinari]

Hi,

Working with v4 and composition API.

What might I be doing wrong, if the variables aren't being sent with the mutation data? I have two refs for username and password, the refs are v-models for the input fields. The only way I can make the mutation work, is to add the variables in the template call of the mutation method.

<template>
  <q-dialog ref="dialogRef">
    <q-card square bordered class="q-pa-lg shadow-1">
      <q-card-section>
        <q-form class="q-gutter-md">
          <q-input square filled clearable v-model="username" type="email" label="username" />
          <q-input square filled clearable v-model="password" type="password" label="password" />
        </q-form>
      </q-card-section>
      <q-card-actions class="q-px-md">
        <q-btn unelevated color="light-green-7" size="lg" class="full-width" label="Login" @click="login({username: username, password: password})"/> //<--- this!!!
      </q-card-actions>
      <q-card-section class="text-center q-pa-none">
        <p class="text-grey-6">Not registered? Create an Account</p>
      </q-card-section>
    </q-card>
  </q-dialog>
</template>

I'm using Quasar Framework. Could it have something to do with using Quasar's dialog plugin?

Scott

[smolinari]

Ok. I've got the answer. Should have read the docs a little more carefully. (maybe the docs can be improved to not show a non-working example 🤔). At any rate, making variables a return of an arrow function fixed the problem.

    const { mutate: login } = useMutation(gql`mutation login ($password: String!, $username: String!){
      login(password: $password, username: $username){
        accessToken
      }
    }`, 
    () => ({ // <-- this!!!!!
      variables: {
        username: username.value,
        password: password.value
      },
      update: async (cache , { data: { login: { accessToken} } }) =>{
      .....
    }))

Scott

[smolinari]

If anyone else runs into this issue and ends up here, let me know please with a quick comment. I'll do a PR to change the docs.

Scott

[Akryum]

It's all documented here already. 😉

[smolinari]

@Akryum - Yes I know. And, I was looking at the docs more than once before I found the answer (as someone else showed me this text too). But, as normal devs would, I was looking only at the code and not the text below it explaining that the code being shown actually doesn't work. 😝

Scott

[Akryum]

Updated the code snippet:

[smolinari]

Awesome! Thanks for the understanding @Akryum

Scott