Skip to main content

​
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:
​
query
string
required
The path to the query file that will provide the data displayed in the visualization.
​
inlineParams
object
An object with custom parameters to be used in the query, in addition to the global parameters of the view.
​
opts
object
Includes options to control the behavior of the chart. For example, react to changes in the parameters to update the data immediately.
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}