Skip to content

There is no way to "just run" a remote query function #15742

@IAkumaI

Description

@IAkumaI

Describe the bug

After the recent introduction of run() for remote queries #15533 there is no way to just run a query universally.

Reproduction

// test.remote.ts
import {query} from '$app/server';

export const remoteTestQuery = query(async () => {
    return 'test response';
});
// example component
<script lang="ts">
    import {remoteTestQuery} from './test.remote';

    const testResult = await anotherFn();

    async function anotherFn() {
        return await remoteTestQuery();
    }
</script>

testResult: {testResult}<br />
<button type="button" onclick={async () => alert(await anotherFn())}>Test</button>

This is a simple example. I want to use the same function for component initialization AND for some event handler (maybe I just need this data somewhere else, doesn't really matter).

In the example, I cannot handle the button click. I will get "Uncaught (in promise) Error: This query was not created in a reactive context and is limited to calling .run, .refresh, and .set."

At the same time, I cannot change the call to await remoteTestQuery().run() - I will get another error on component render: "Uncaught (in promise) Error: On the client, .run() can only be called outside render, e.g. in universal load functions and event handlers. In render, await the query directly".

So I'm in a situation where I don't understand how to deal with it. Change query to command? Duplicate logic of the function?

Logs

System Info

@sveltejs/kit: 2.57.1
svelte: 5.55.4

Severity

annoyance

Additional Information

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions