@urql/svelte -调用外部组件初始化的函数

Question

我正在尝试使用graphQL中的@urql/svelte集成svelte API。我必须在单击按钮上调用graphQL查询。但当我这样做时，我会发现以下错误：

Uncaught (in promise) Error: Function called outside component initialization
    at get_current_component (index.mjs:948:15)
    at getContext (index.mjs:981:12)
    at getClient (context.ts:7:14)
    at query (operations.ts:58:18)
    at getNonce (metamask.ts:27:2)
    at loadData (index.svelte? [sm]:28:17)

我在__layout.svelte中初始化了连接。

    initClient({
        url: "http://localhost:8082/graphql",
        fetchOptions: {
            headers: {
                authorization: "xxxxxxxxxx"
            }
        }
    });

下面是定义查询的myquery.ts文件：

import { operationStore, query } from '@urql/svelte';
const nonceQuery = `
   query ($address: String!) {
       nonceQuery(address: $address) {
           nonce
       }
   }
`;
export const getNonce  = (address: string) => {
    const nonce = operationStore(nonceQuery,
        { address }
    );
    query(nonce);
    return nonce;
};

在index.svelte文件中，我尝试在单击按钮时调用此命令：

<script>
 import { getNonce } from "./myquery";
 let nonce;

 const onCall = () => {
   nonce = getNonce("some_address")
 }

 $: console.log("nonce: ", $nonce)
</script>

<button on:click={onCall}>
  Nonce
</button>

Answer 1

从堆栈跟踪中可以看到，getContext是在某个点被调用的，正如错误消息所指出的那样，这就是在组件初始化之外不允许 (尽管该消息可以提到这是关于getContext.)。

您可能需要重写函数的方式，使它们不再依赖于内部获取上下文。您可以将所需的对象作为参数传递，也可以先构造一种API类，该类在初始化期间获取上下文，但尚未加载任何数据。

示例：

class Api {
    constructor() {
        this.client = getContext('client');
    }
    
    load() {
        // Use client here
        console.log(this.client);
    }
}

// Construct during component init, use later
const api = new Api();

function onButtonClick() {
    api.load();
}

扩展REPL