4

我正在尝试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/sveltehttps://github.com/FormidableLabs/urql/issues/795。

有关您的 Svelte 项目的信息: - Chrome 83 - Svelte 版本:3.23.0 - 汇总

4

2 回答 2

2

我的情况有点不同,但得到了同样的错误。就我而言,我试图让 Svelte/Sapper 在 Docker 容器中运行以用于开发目的。在此之前我一直在摆弄package.json,在某些时候我决定移动sveltesapper使用“依赖项”而不是“devDependencies”。

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

这是个坏主意。一旦我将它移回“devDependencies”,错误就消失了,一切都按预期工作。

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

我希望这可以帮助某人。

于 2020-08-03T02:47:06.130 回答
2

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

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

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

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

如果好奇的话,那里有关于 Vite依赖项预捆绑的文档。

于 2021-04-27T23:31:01.463 回答