@ urql / svelte, функция вызывается вне инициализации компонента, если не в onMount

Я пробую удивительные работы, сделанные 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;
};

Я могу создать REPL на CodeSandbox, если вам нужно, без проблем.

Ошибка в @urql/svelte: https://github.com/FormidableLabs/urql/issues / 795..

Информация о вашем проекте Svelte: - Chrome 83 - версия Svelte: 3.23.0 - Накопительный пакет


javascript svelte svelte-3 svelte-component urql
person Fred Hors    schedule 30.05.2020    source источник
comment
Похоже, этим реактивным операторам не нравятся асинхронные функции. Вам это нужно для вашей логики? Почему бы вам не использовать блоки ожидания из другого вопроса: stackoverflow.com/questions/62087073/   -  person Gh05d    schedule 30.05.2020

Ответы (2)


arrow_upward
1
arrow_downward

Моя ситуация была немного другой, но возникла та же ошибка. В моем случае я пытался запустить 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"
}

Я надеюсь, что это поможет кому-то в будущем.

person Phillip    schedule 03.08.2020
comment
Я бы никогда не догадался, что это могло быть проблемой, но это точно было для меня. Спасибо! Я думаю, что происходит следующее: поскольку все дело в svelte не доставляет код фреймворка клиенту, все его вещи должны находиться в devDependencies. В моем случае это был стройный аполлон, который оказался не в том месте. - person sunny-mittal; 29.11.2020

arrow_upward
1
arrow_downward

Если вы используете Vite в качестве сборщика, вам нужно будет исключить @urql/svelte из предварительной сборки зависимостей, что, по-видимому, вызвало у меня эту ошибку.

Добавьте это в свою конфигурацию Vite:

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

Это также работает для svelte-apollo, сделайте то же самое, но замените имя пакета!

Если интересно, есть документы по предварительному объединению зависимостей Vite.

person Teodor Maxim    schedule 27.04.2021