1

我正在使用 Svelte 和 URQL。

我在这里使用你的包文件夹中的 svelte 示例，除了我format: 'esm'在我的rollup.config.js.

当我在我的代码中使用时，我的 Rollup 已经将我的最终包代码分割成块import('./Component.svelte')。

我很难做的是异步初始化 urql，如下所示：

import { initClient, dedupExchange, fetchExchange } from '@urql/svelte'
import { cacheExchange } from "@urql/exchange-graphcache";

const exchanges = [
  cacheExchange({
    resolvers: { /*... my resolvers*/ },
    schema // I need this async, something like: await import('./schema').then(result => result.default)
  }),
  fetchExchange
]

export function initURQL () {
  initClient({
    url: 'http://localhost/graphql',
    exchanges
  })
}

如果我使用类似的东西：

export async function initURQL () {
  const schema = await import('./schema.json').default

  const exchanges = [
  cacheExchange({
    resolvers: {},
    schema
  }),
  fetchExchange
  ]
  initClient({
    url: 'http://localhost/graphql',
    exchanges
  })
}`

App.svelte并从中调用它;(async () => await initURQL())()会给我错误：

Uncaught (in promise) Error: Function called outside component initialization

我怎样才能解决这个问题？

4

1 回答 1

1

我没有使用 URQL，但我也遇到了这个错误。

不幸的是，您不能异步调用getContext或setContext（调用中的内容initClient） 。urql/packages/svelte-urql/src/context.ts

https://svelte.dev/docs#setContext：

与生命周期函数一样，它必须在组件初始化期间调用。

https://github.com/timhall/svelte-apollo/issues/9#issuecomment-646184888回答了一个非常相似的问题，并希望为您指出一个合适的解决方法：

getClient 和 setClient 会发生这种情况，因为它是一个细长的上下文，仅在组件初始化（构造）时可用，不能在事件处理程序中。请参阅：设置存储值的 Svelte 用户注册问题的答案 最有可能发生的情况是，当它不可用时，您在异步事件 su 中将其调用为 on:click、onMount、onDestroy。解决方案是根据 https://svelte.dev/tutorial/context-api将您的客户端存储为上下文中的商店。

一般来说，它应该看起来像：

setClient(writable(apolloClient));

let client
getClient().subscribe((_client) => client = _client);
于 2020-09-30T17:50:45.217 回答