title: @urql/svelte, "Function called outside component initialization" if not in onMount
body: <p>I'm trying the amazing works done by <a href="https://github.com/FormidableLabs/urql/tree/master/packages/svelte-urql" rel="noreferrer">https://github.com/FormidableLabs/urql/tree/master/packages/svelte-urql</a> guys.</p>
  
  <p>Everything works good until today issue.</p>
  
  <p>I'm using the below code and it gives me this error:</p>
  
  <pre><code>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
  </code></pre>
  
  <p>Code:</p>
  
  <pre><code>&lt;script&gt;
    import { query } from '@urql/svelte'
    import { myQuery } from './myQuery'
  
    let players
    let myVars
  
    function sleep (ms) {
      return new Promise((resolve) =&gt; setTimeout(resolve, ms))
    }
  
    $: (async () =&gt; {
      await sleep(2000) // this gives me the error; removing it make it work
      players = query({
        query: myQuery,
        variables: { ...myVars },
        requestPolicy: 'cache-and-network'
      })
    })()
  &lt;/script&gt;
  
  {#if !players}
    Loading players...
  {:else}
    Players loaded! Do the work.
  {/if}
  </code></pre>
  
  <p><strong>Can you suggest what's the problem?</strong></p>
  
  <p>If I use <code>await()</code> in <code>onMount()</code> it works! Like this:</p>
  
  <pre class="lang-js prettyprint-override"><code>onMount(async () =&gt; {
    await sleep(2000)
    loaded = true
  })
  </code></pre>
  
  <p>Here the code for <code>@urql/svelte</code>:</p>
  
  <ol>
  <li>query.ts: <a href="https://github.com/FormidableLabs/urql/blob/master/packages/svelte-urql/src/operations/query.ts" rel="noreferrer">https://github.com/FormidableLabs/urql/blob/master/packages/svelte-urql/src/operations/query.ts</a></li>
  <li>context.ts: <a href="https://github.com/FormidableLabs/urql/blob/master/packages/svelte-urql/src/context.ts" rel="noreferrer">https://github.com/FormidableLabs/urql/blob/master/packages/svelte-urql/src/context.ts</a></li>
  </ol>
  
  <p>Maybe the <code>context</code> code?</p>
  
  <pre><code>import { setContext, getContext } from 'svelte';
  import { Client, ClientOptions } from '@urql/core';
  
  const CLIENT = '$$_URQL';
  
  export const getClient = (): Client =&gt; getContext(CLIENT);
  
  export const setClient = (client: Client): void =&gt; {
    setContext(CLIENT, client);
  };
  
  export const initClient = (args: ClientOptions): Client =&gt; {
    const client = new Client(args);
    setClient(client);
    return client;
  };
  </code></pre>
  
  <p><em>I can create a REPL on CodeSandbox if you need, no problem.</em></p>
  
  <p><em>Bug on <code>@urql/svelte</code>: <a href="https://github.com/FormidableLabs/urql/issues/795._" rel="noreferrer">https://github.com/FormidableLabs/urql/issues/795.</em></a></p>
  
  <p><strong>Information about your Svelte project:</strong>
  - Chrome 83
  - Svelte version: 3.23.0
  - Rollup</p>