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

，你能告诉我怎么回事吗？

如果我在await()中使用onMount()，它就能工作！如下所示：

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._上的Bug

关于您的Svelte项目的信息：-Chrome83-Svelte版本:3.23.0-Rollup

Answer 1

如果使用Vite作为绑定器，则需要将@urql/svelte排除在依赖预绑定之外，这显然导致了我的错误。

将其添加到Vite配置中：

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

这也适用于svelte-apollo，做同样的事情，但是替换包名！

如果好奇的话，Vite的依赖预捆绑上的文档就在那里。

Answer 2

我的情况有点不同，但也犯了同样的错误。在我的例子中，为了开发目的，我试图让Svelte/Sapper在Docker容器中运行。在此之前，我一直在摆弄package.json，在某个时候，我决定将svelte和sapper移到“依赖”而不是"devDependencies“。

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

这是个坏主意，一把它移回"devDependencies"，错误就消失了，一切都如期而至。

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

我希望这能帮上忙。