@urql/svelte，“在组件初始化之外调用的函数”如果不在 onMount 中

Posted 2023-03-07

【中文标题】@urql/svelte，“在组件初始化之外调用的函数”如果不在 onMount 中

【英文标题】：@urql/svelte, "Function called outside component initialization" if not in onMount

【发布时间】：2020-09-17 22:45:57

【问题描述】：

我正在尝试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的代码：

query.ts:https://github.com/FormidableLabs/urql/blob/master/packages/svelte-urql/src/operations/query.ts 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 项目的信息： - 铬 83 - 苗条版：3.23.0 - 汇总

【问题讨论】：

似乎这些反应式语句不喜欢异步函数。你的逻辑需要它吗？为什么不使用其他问题中的 await 块：***.com/questions/62087073/…

【参考方案1】：

如果使用 Vite 作为捆绑器，您需要将 @urql/svelte 从依赖项预捆绑中排除，这显然对我造成了此错误。

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

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

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

Vite 的 dependency pre-bundling 上的文档在那里，如果好奇的话。

【参考方案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"

我希望这可以帮助某人。

【讨论】：

我从来没有猜到这可能是问题所在，但它肯定是我的问题。谢谢！我认为正在发生的事情是，由于 svelte 的全部内容不是向客户端发送框架代码，它的所有内容都需要在 devDependencies 中。就我而言，是苗条的阿波罗在错误的地方。