Search code examples
svelteurql

Svelte and urql: operationStore isn't reactive?

When a prop passed from the parent changes, and is used as a parameter of an urql query, the query does not seem to be reexecuted.

I see many examples such as:

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

But why there doesn't seem to be any example available, where we want to reexecute the query simply because the prop (variable id in example above) changed?

I must be missing something big or the way I design my components is wrong?

Solution

  • From the docs 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.

    So I think it might be possible to reactivley update the operationStore variable like this and trigger the reexecution of the query

    export let id;

const store = operationStore(query, { id })

$: store.variables = {
  id
};

query(store)