{#await ... }

​

Introduction

The await block, along with the runQuery function lets you manually run queries in a synchronous manner. This is useful when you want to display custom content based on the results of a query.

​

Basic usage

There are three possible states for the await block: pending, fulfilled and rejected. You can use the {:then} and {:catch} blocks to handle the fulfilled and rejected states respectively.

{#await runQuery('sample')}
	<!-- This will be displayed while the query is pending -->
	<p>Waiting...</p>
{:then data}
	<!-- This will be displayed if the query is successful -->
	<p>There are {data.length} elements</p>
{:catch error}
	<!-- This will be displayed if the query fails -->
	<p>{error.message}</p>
{/await}

If you don’t want to show a loading state or an error message, those parts can be omitted:

{#await runQuery('sample') then data}
	<p>The value is {data}</p>
{/await}

​

The Run Query function

The runQuery function is a built-in function that lets you run queries synchronously. It takes a query name as an argument and returns the result of the query.

In addition to the query name, this function can have these three attributes:

Refer to the Running queries section for more information about query configuration.

The results of the query, which is accessed through the {:then} block, will be the data returned by the query. This data is structured as an array of objects, where each object represents a row in the query result. For example:

[
	{ "name": "Alice", "age": 25 },
	{ "name": "Bob", "age": 30 }
]

​

Example

{#await runQuery(
	'users',
	{ minimum_age: 25 }
)}
	<p>Loading data...</p>

{:then data}
	<p>There are {data.length} users older than 25:</p>
	{#each data as user}
		<p>{user.name} is {user.age} years old</p>
	{/each}

{:catch error}
	<p>There has been an error!</p>
	<p>{error.message}</p>
	
{/await}