4 replies

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

Svelte Quickstart useQuery not Reacting

Similar Threads