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

Question

当从父级传递的 prop 发生变化，并用作 urql 查询的参数时，该查询似乎没有重新执行。

我看到很多例子，例如：

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

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

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

Answer 1

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

The query function accepts our store and starts using the Client to execute our query. It may only be called once for a store and lives alongside the component's lifecycle. It will automatically read changes on the operationStore and will update our query and results accordingly.

Both, updating todos.variables and $todos.variables (here todos = store) in a component for instance, will cause query to pick up the update and execute our changes.

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

export let id;

const store = operationStore(query, { id })

$: store.variables = {
  id
};

query(store)

Answer 2

Corrl 的回答基本正确。

然而，在实践中，我最终通常做的是在页面或组件中定义和使用我自己的 refreshQuery 函数，其中 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 };
    }
}

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

Svelte and urql: operationStore isn't reactive?

svelte

urql