Query Your Data
The lightning/uiGraphQLApi module has two functions, gql and graphql, for executing GraphQL queries.
gql— A Javascript tagged template literal used to indicate the presence and location of GraphQL queries within your LWC component. All GraphQL queries passed tographqlwire adapter must be wrapped with thegqltagged template literal. Salesforce usesgqlto understand and apply special processing to your GraphQL queries at different stages of the component lifecycle.graphql— The identifier of the GraphQL wire adapter. The graphql wire adapter emits the results of executing a GraphQL query as a stream of values in the private function defined by the developer. Values emitted bygraphqlcan containdataanderrorsproperties. These properties follow the GraphQL Response specification.
By default, GraphQL returns the first 10 results of a query. Here's how you can fetch the first 50 account names.
The wire adapter returns a JSON response that looks like this.
The data returned from the GraphQL wire adapter has the same structure as the GraphQL query. While this structure works fine for programmatic use, it can be difficult to consume inside your component’s template. This line of code in the example removes extra layers in the response data to make it easier to consume in the template.
Your component then renders the results using the for:each directive with the Id as the key.
Display the query results in your component. This example uses the lightning-card base component to group the returned accounts with a title you retrieve with the Name { value } node.
You can make your component reactive to data changes, such as adding a dropdown that enables different query selection.