Robster•3mo ago

Svelte Quickstart useQuery not Reacting

I can't get quickstart https://docs.convex.dev/quickstart/svelte to work. To summarize the issue, useQuery in +page.svelte isn't reacting and displaying the sample data, I'm not getting any errors, I've tried both local and hosted convex. The query handler prints the sample data, which means it is called from +page.svelte:

// src/convex/tasks.ts
import { query } from "./_generated/server";

export const get = query({
  args: {},
  handler: async (ctx) => {
    const tasks = await ctx.db.query("tasks").collect();

    console.log(tasks) // prints sampleData

    return tasks.map((task) => ({ ...task, assigner: "tom" }));
  },
});

// src/convex/tasks.ts
import { query } from "./_generated/server";

export const get = query({
  args: {},
  handler: async (ctx) => {
    const tasks = await ctx.db.query("tasks").collect();

    console.log(tasks) // prints sampleData

    return tasks.map((task) => ({ ...task, assigner: "tom" }));
  },
});

While the query from useQuery is stuck on isLoading:

// src/routes/+page.svelte
<script lang="ts">
    import { useQuery } from 'convex-svelte';
    import { api } from '../convex/_generated/api.js';

    const query = useQuery(api.tasks.get, {});
</script>

{#if query.isLoading}
    Loading...
{:else if query.error}
    failed to load: {query.error.toString()}
{:else}
    <ul>
        {#each query.data as task}
            <li>
                {task.isCompleted ? '☑' : '☐'}
                <span>{task.text}</span>
                <span>assigned by {task.assigner}</span>
            </li>
        {/each}
    </ul>
{/if}

// src/routes/+page.svelte
<script lang="ts">
    import { useQuery } from 'convex-svelte';
    import { api } from '../convex/_generated/api.js';

    const query = useQuery(api.tasks.get, {});
</script>

{#if query.isLoading}
    Loading...
{:else if query.error}
    failed to load: {query.error.toString()}
{:else}
    <ul>
        {#each query.data as task}
            <li>
                {task.isCompleted ? '☑' : '☐'}
                <span>{task.text}</span>
                <span>assigned by {task.assigner}</span>
            </li>
        {/each}
    </ul>
{/if}

I might've missed something, but I'm sceptical of the compatibility of Svelte to begin with

Svelte Quickstart | Convex Developer Hub

Add Convex to a Svelte project

4 Replies

Convex Bot•3mo ago

Thanks for posting in <#1088161997662724167>. Reminder: If you have a Convex Pro account, use the Convex Dashboard to file support tickets. - Provide context: What are you trying to achieve, what is the end-user interaction, what are you seeing? (full error message, command output, etc.) - Use search.convex.dev to search Docs, Stack, and Discord all at once. - Additionally, you can post your questions in the Convex Community's <#1228095053885476985> channel to receive a response from AI. - Avoid tagging staff unless specifically instructed. Thank you!

Jamal•3mo ago

@Robster Are you still having this error?

RobsterOP•3mo ago

Yes, but Convex support has noted it and helped me go around the issue The issue is with a new svelte update: https://github.com/sveltejs/svelte/issues/16203 Setting svelte in package.json as a version older than the issue fixed it (e.g. "~5.33.0")

GitHub

Reactivity issue since 5.34.4 · Issue #16203 · sveltejs/svelte

Describe the bug Since 5.34.4 there is reactivity issue. Reproduction You can reproduce here. It works like a charme with 5.34.3 https://svelte.dev/playground/hello-world?version=5.34.4#H4sIAAAAAAA...

ballingt•3mo ago

Keep an eye on that issue, if they end up saying it's not a bug then we'll need to change our instructions, but it broke a lot of libraries so I think they'll probably back down or at least delay the change to a later update so libraries have time to update.

Svelte Quickstart useQuery not Reacting

Did you find this page helpful?