Query Data

Let’s learn how to inject query results into your running Lightning Web Component code.

This doesn’t apply to custom Lightning web components in Lightning dashboards as they don’t query data.

Note

To start, modify your Hello World component to use a step by setting hasStep to true in the js-meta.xml.

1<hasStep>true</hasStep>

Add the results wiring into your .js file.

1import { LightningElement, api } from "lwc";
2
3export default class HelloWorld extends LightningElement {
4  @api title;
5
6  @api results;
7
8  get stringResults() {
9    return JSON.stringify(this.results);
10  }
11}

To view the query results as text, update your .html file.

1<template>
2  Hello World: {title} Results: {stringResults}
3</template>

Deploy the changes to your component to your org. Refresh your dashboard to pick up any updates to the component code. After refreshing the dashboard, edit the dashboard and click your component. You’re now prompted to select a data source. You can select a dataset to create a query or select an existing query. Make your selection and watch the query results appear in your dashboard.

See Also