@urql/svelte，“在組件初始化之外調用的函數”如果不在 onMount 中

Question

我正在嘗試https://github.com/FormidableLabs/urql/tree/master/packages/svelte-urql伙計們完成的令人驚嘆的工作。

直到今天的問題，一切都很好。

我正在使用下面的代碼，它給了我這個錯誤：

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

代碼：

<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}

你能提出什么問題嗎？

如果我在onMount()中使用await() ) 它可以工作：像這樣：

onMount(async () => {
  await sleep(2000)
  loaded = true
})

這里是@urql/svelte的代碼：

1. query.ts: https://github.com/FormidableLabs/urql/blob/master/packages/svelte-urql/src/operations/query.ts
2. context.ts： https://github.com/FormidableLabs/urql/blob/master/packages/svelte-urql/src/context.ts

也許是context代碼？

import { setContext, getContext } from 'svelte';
import { Client, ClientOptions } from '@urql/core';

const CLIENT = '$$_URQL';

export const getClient = (): Client => getContext(CLIENT);

export const setClient = (client: Client): void => {
  setContext(CLIENT, client);
};

export const initClient = (args: ClientOptions): Client => {
  const client = new Client(args);
  setClient(client);
  return client;
};

如果您需要，我可以在 CodeSandbox 上創建一個 REPL，沒問題。

@urql/svelte上的錯誤： https://github.com/FormidableLabs/urql/issues/795。

有關您的 Svelte 項目的信息： - Chrome 83 - Svelte 版本：3.23.0 - 匯總

Answer 1

我的情況有點不同，但得到了同樣的錯誤。 就我而言，我試圖讓 Svelte/Sapper 在 Docker 容器中運行以用於開發目的。 在此之前，我一直在擺弄package.json ，在某些時候我決定將svelte和sapper轉移到“依賴關系”而不是“開發依賴關系”。

"dependencies": {
    // ...
    "sapper": "^0.27.0",
    "svelte": "^3.0.0"
}

這是個壞主意。 一旦我將它移回“devDependencies”，錯誤就消失了，一切都按預期工作。

"devDependencies": {
    // ...
    "sapper": "^0.27.0",
    "svelte": "^3.0.0"
}

我希望這可以幫助某人。

Answer 2

如果將 Vite 用作捆綁器，則需要將@urql/svelte從依賴項預捆綁中排除，這顯然對我造成了此錯誤。

將此添加到您的 Vite 配置中：

{
  optimizeDeps: {
    exclude: ['@urql/svelte']
  }
}

這也適用於svelte-apollo ，做同樣的事情，但替換 package 名稱！

如果好奇的話，那里有關於 Vite依賴項預捆綁的文檔。