svelte: error when mutation is in function

Hi guys,

I’m having a hard time trying make a simple login mutation work, here’s the code:

import {
    initClient,
    mutate
} from '@urql/svelte';

initClient({
    url: 'https://graphql.fauna.com/graphql',
});

let promise;
let username = '';
let password = '';

const login = () => {
    promise = mutate({
        query: `
            mutation (
                $username: String!,
                $password: String!
            ) {
                loginUser(input: {
                    username: $username,
                    password: $password
                })
            }
        `,
        variables: {
            username,
            password,
        }
    });
}

urql version & exchanges: v0.2.3

I don’t understand why it just launches the mutation once and then it throws the error Function called outside component initialization, the only way to make it work is to do something like $: result = mutation(...) but it doesn’t make sense, I don’t want to run the mutation after each keystroke.

So please tell me, what I am doing wrong ?

Thank you !

[kitten]

Currently the mutate helper in Svelte runs immediately as we’re still figuring out patterns.

However, if you call a mutation programmatically you can use getClient() and call client.mutation, like so: https://formidable.com/open-source/urql/docs/concepts/core-package/#one-off-queries-and-mutations

We’re still working on idiomatic Svelte APIs so this one’s also on our list to figure out what the best way forward is

Edit: For context, the previous API had a lazy promise. Currently I’m thinking we could just return a closure like in the React API

[kitten]

I hope I won’t forget, but I’ll come back to you once we’ve got an idea on how to improve this Svelte API 👍