Skip to content

[docs] Request: Add a getter sample for reactivity in the Svelte Quickstart #154

@aster-void

Description

@aster-void

Code Example:

<script lang="ts">
  let userId = $state(1);

  // this query is NOT reactive to userId.
  const userQuery = useQuery(api.users.get, { id: userId });
  
  // this query IS reactive to userId.
  const userQuery = useQuery(api.users.get, () => ({ id: userId }));
</script>

ID: <input bind:value={userId} />
-> Name: {userQuery.data?.name ?? "Loading..."}

Context:

Because of how reactivity works in svelte 5, states references in a query must be wrapped in a getter function. Otherwise, the query won't change after userId changes.

Request:

Please add this example (or similar one) to Svelte Quickstart. It's so critical that the convex-svelte's README is not enough.

Metadata

Metadata

Assignees

No one assigned

    Labels

    documentationImprovements or additions to documentation

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions