Urql: svelte: error when mutation is in function

[gawlk]

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

[gawlk]

Ok ! Forgot to try with that, thank you very much

You guys already did a great job

[gawlk]

So now I'm having this error when using client.mutation

visitor.mjs:225 Uncaught Error: Invalid AST Node: { query: "
\n            mutation Name(
\n                $username: String!,
\n                $password: String!
\n            ) {
\n                loginUser(input: {
\n                    username: $username,
\n                    password: $password
\n                })
\n            }
\n        ", variables: { username: "ne", password: "ne" } }.

(Changed it just a little bit, it was all on one line)

Am I doing something wrong again ?

[kitten]

This API is a little different as it’s on the Client directly.
It accepts the query and variables as separate arguments (first and second respectively)

Also don’t forget to call toPromise() on the Return value or it won’t execute :)

[gawlk]

Omg, of course ! Thanks again ! You guys are great

[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 👍

[gawlk]

That’s very kind of you !

[frederikhors]

This is really a TOP priority for Svelte users IMO (thanks again for your amazing work, guys!).

Example:

<script>
  import { query } from '@urql/svelte'
  import { myQuery } from './myQuery'

  let players
  let myVars

  function sleep (ms) {
    return new Promise((resolve) => setTimeout(resolve, ms))
  }

  $: (async () => {
    await sleep(2000) // this gives me the error; removing it make it work
    players = query({
      query: myQuery,
      variables: { ...myVars },
      requestPolicy: 'cache-and-network'
    })
  })()
</script>

{#if !players}
  Loading players...
{:else}
  Players loaded! Do the work.
{/if}

Error: Function called outside component initialization
  at get_current_component (index.mjs:615)
  at getContext (index.mjs:648)
  at getClient (urql-svelte.mjs:55)
  at query (urql-svelte.mjs:81)
  at Players.svelte:41

I can create a REPL on CodeSandbox if you need, @kitten, no problem.

[frederikhors]

Can you re-open this until we fix it?

[frederikhors]

I opened an issue here to better digging into: https://github.com/sveltejs/svelte/issues/4934.