@urql/svelte，“调用外部组件初始化的函数"；如果不在 onMount
问题说明
我正在尝试 https://github.com/FormidableLabs/urql/tree/master/packages/svelte-urql 伙计们.
I'm trying the amazing works done by https://github.com/FormidableLabs/urql/tree/master/packages/svelte-urql guys.
一切正常，直到今天发行.
Everything works good until today issue.
我正在使用下面的代码，它给了我这个错误:
I'm using the below code and it gives me this error:
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() 它工作！像这样:
If I use await() in onMount() it works! Like this:
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- 汇总
Information about your Svelte project: - Chrome 83 - Svelte version: 3.23.0 - Rollup
正确答案
我的情况有点不同，但得到了同样的错误.就我而言，为了开发目的，我试图让 Svelte/Sapper 在 Docker 容器中运行.在此之前我一直在摆弄 package.json 并且在某些时候我决定也将 svelte 和 sapper 移动到depedencies".而不是devDependencies".
My situation was a bit different, but got the same error. In my case, I was trying to get Svelte/Sapper running in a Docker container for development purposes. I was fiddling around with the package.json before this and at some point I decided too move svelte and sapper to "depedencies" instead of "devDependencies".
"dependencies": {
// ...
"sapper": "^0.27.0",
"svelte": "^3.0.0"
}
这是个坏主意.一旦我将它移回devDependencies"，错误就消失了，一切都按预期进行.
This was a bad idea. Once I moved it back to "devDependencies", the error went away and everything worked as expected.
"devDependencies": {
// ...
"sapper": "^0.27.0",
"svelte": "^3.0.0"
}
我希望这能帮助某人.
这篇好文章是转载于：学新通技术网
