Having trouble re-executing a query (Svelte)

[a-human-bean]

I'm trying to build a search form in which a query is "paused" and only should be sent on form submission. After looking through the docs Basics -> Svelte, I've come up with something like this:

const QUERY = `
    query {
        data {
            field
        }
    }
`;

const opStore = operationStore(
    QUERY,
    { ...initialVariables },
    {
        requestPolicy: 'cache-first', // Since pause = true, this can be elided?
        pause: true, // Seems to not officially be a part of the `OperationContext` object
    }
);
query(opStore);

function submitForm() {
    $opStore.context = {
        requestPolicy: 'network-only',
    }; // pause = false is implicit?
}

As expected, the query is not run when the component mounts, because the query context has been updated. However, consequent updates do not trigger re-execution of the query. Also, re-assigning an updated copy of variables does not trigger re-execution either. It's not obvious to me whether or not the variables need to be re-assigned to signal an update within Svelte, or if they are bound by reference upon initialization of the `operationStore.

function submitForm() {
    $opStore.variables = { ...newVariables } // Variables need to be updated reactively or already bound?
}

Since I am new to Svelte, I figure that I am misunderstanding some basic mechanics or concepts and not following the correct idioms and practices. What am I doing wrong?

[kitten]

Alright, just to get started. It would have been a little quicker not to start the thread with pausing, since you've written that that works and it very closely matches the docs 😅 anyway;

I suppose, your first question is why the operation doesn't execute again when you reassign something. The answer is why would it? As long as nothing actually changes there's no need to rerun anything.

In fact; you already understood that the request policy needs to change so that the cache is skipped.

The solution here is that it seems that you want to run the query conditionally. On the one hand, I know that Svelte would support wrapping the query(opStore) line reactively. However, it may be much easier for you to check out the imperative API on the Client,
So for instance client.query(...).toPromise() and such since you're running queries programmatically for a form

Edit: sorry, I forgot to leave a link to the above API: https://formidable.com/open-source/urql/docs/basics/core/#one-off-queries-and-mutations

[a-human-bean]

Thanks, everything works now! I completely missed the core API section 🤦 , so it really was just as straightforward as the one-liner you mentioned.

[kitten]

Yea, I'm currently working on figuring out how to highlight some parts to clarify that it's a good read even if you're using bindings for your framework of choice