svelte - Svelte 和 urql： operationStore 不是反应式的？

Question

当从 parent 传递的 prop 发生更改并用作 urql 查询的参数时，查询似乎不会重新执行。

我看到很多例子，例如：

export let id;
const store = operationStore(query, { id })
query(store)

但是为什么似乎没有任何可用的示例，我们只想重新执行查询，因为 prop（上面示例中的变量 id）发生了变化？

我一定是遗漏了一些重要的东西，或者我设计组件的方式是错误的？

Answer 1

Corrl 的回答基本上是正确的。

然而，在实践中，我最终通常做的是refreshQuery在 props 作为查询变量传递的页面或组件中定义和使用我自己的函数，并进行测试以确保只有在任何 props 确实发生变化时才重新运行查询：

export let foo
export let bar

const store = operationStore(query, { foo, bar })

query(store)

$: refreshQuery(foo, bar)

function refreshQuery(foo, bar) {
    if ($store.variables['foo'] !== foo || $store.variables['bar'] !== bar) {
        $store.variables = { foo, bar };
    }
}

Answer 2

来自文档https://formidable.com/open-source/urql/docs/basics/svelte/

查询函数接受我们的商店并开始使用客户端执行我们的查询。它可能只为 store 调用一次，并且与组件的生命周期一起存在。它将自动读取 operationStore 上的更改，并相应地更新我们的查询和结果。

例如，更新组件中的 todos.variables 和 $todos.variables（这里的 todos = store）都会导致查询获取更新并执行我们的更改。

所以我认为有可能像这样重新更新 operationStore 变量并触发查询的重新执行

export let id;

const store = operationStore(query, { id })

$: store.variables = {
  id
};

query(store)