admin管理员组

文章数量:1418138

I'm trying the amazing works done by guys.

Everything works good until today issue.

I'm using the below code and it gives me this error:

Error: Function called outside ponent initialization
  at get_current_ponent (index.mjs:615)
  at getContext (index.mjs:648)
  at getClient (urql-svelte.mjs:55)
  at query (urql-svelte.mjs:81)
  at Players.svelte:41

Code:

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

Can you suggest what's the problem?

If I use await() in onMount() it works! Like this:

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

Here the code for @urql/svelte:

  1. query.ts: .ts
  2. context.ts: .ts

Maybe the context code?

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

I can create a REPL on CodeSandbox if you need, no problem.

Bug on @urql/svelte: .

Information about your Svelte project: - Chrome 83 - Svelte version: 3.23.0 - Rollup

I'm trying the amazing works done by https://github./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 ponent initialization
  at get_current_ponent (index.mjs:615)
  at getContext (index.mjs:648)
  at getClient (urql-svelte.mjs:55)
  at query (urql-svelte.mjs:81)
  at Players.svelte:41

Code:

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

Can you suggest what's the problem?

If I use await() in onMount() it works! Like this:

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

Here the code for @urql/svelte:

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

Maybe the context code?

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

I can create a REPL on CodeSandbox if you need, no problem.

Bug on @urql/svelte: https://github./FormidableLabs/urql/issues/795.

Information about your Svelte project: - Chrome 83 - Svelte version: 3.23.0 - Rollup

  • javascript
  • svelte
  • svelte-3
  • svelte-ponent
  • urql
Share Improve this question asked May 30, 2020 at 11:17 Fred HorsFred Hors 4,0753 gold badges39 silver badges108 bronze badges 1
  • Seems like these reactive statements don't like asynchronous functions. Do you need it for your logic? Why don't you use the await blocks from your other question: stackoverflow./questions/62087073/… – Gh05d Commented May 30, 2020 at 15:07
Add a ment  | 

2 Answers 2

Reset to default 2

If using Vite as a bundler, you will need to exclude @urql/svelte from dependency pre-bundling, which apparently caused this error for me.

Add this to your Vite config:

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

This also works for svelte-apollo, do the same but replace the package name!

Docs on Vite's dependency pre-bundling are there, if curious.

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 to move svelte and sapper to "dependencies" instead of "devDependencies".

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

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

I hope this helps someone down the line.

本文标签：

版权声明：本文标题：javascript - @urqlsvelte, &quot;Function called outside component initialization&quot; if not in onMount - Stack Overflo 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745274116a2651075.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。