---
schema_version: "1"
id: 191e24477617e31cb381fac64061c7c6a54e60e0395f277cfe9d8044c3003bc9
title: Query Your Data
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/graphql-api/graphql/guides/wire/graphql-wire-lwc-query.md
canonical_url: https://developer.salesforce.com/docs/platform/graphql/guide/graphql-wire-lwc-query.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: f1a51f37da2697b8a481d18c6d10c6fc5c63c70a281bcb967fd30320c5469859
products:
  - GraphQL API
---
# Query Your Data

The `lightning/graphql` 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 to `graphql` wire adapter must be wrapped with the `gql` tagged template literal. Salesforce uses `gql` to 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 by `graphql` can contain `data` and `errors` properties. These properties follow the [GraphQL Response specification](https://graphql.org/learn/serving-over-http/#response).

**note:** The `lightning/graphql` module supersedes the `lightning/uiGraphQLApi` module. We recommend that you use `lightning/graphql` if possible. Newer features, such as optional fields and dynamic query construction, require `lightning/graphql`. Use `lightning/uiGraphQLApi` only if you’re supporting Mobile Offline use cases.

## Send a GraphQL Query from LWC

By default, GraphQL returns the first 10 results of a query. Here’s how you can fetch the first 50 account names.

```javascript
//simpleGQL.js
import { LightningElement, wire } from "lwc";
import { gql, graphql } from "lightning/graphql";
export default class SimpleGQL extends LightningElement {
  results;
  errors;

  @wire(graphql, {
    query: gql`
      query AccountWithName {
        uiapi {
          query {
            Account(first: 50) {
              edges {
                node {
                  Id
                  Name {
                    value
                  }
                }
              }
            }
          }
        }
      }
    `,
  })
  graphqlQueryResult({ data, errors }) {
    if (data) {
      this.results = data.uiapi.query.Account.edges.map((edge) => edge.node);
    }
    this.errors = errors;
  }
}
```

The wire adapter returns a JSON response that looks like this.

```json
{
  "data": {
    "uiapi": {
      "query": {
        "Account": {
          "edges": [
            {
              "node": {
                "Id": "0011a00000cR4wuAAC",
                "Name": {
                  "value": "Edge Communications"
                }
              }
            },
            {
              "node": {
                "Id": "0011a00000cQvEwAAK",
                "Name": {
                  "value": "United Oil"
                }
              }
            },
            {
              "node": {
                "Id": "0011a00000cRQ1wAAG",
                "Name": {
                  "value": "Apple"
                }
              }
            }, # more data here
          ]
        }
      }
    }
  },
  "errors": []
}
```

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.

```js
this.results = data.uiapi.query.Account.edges.map((edge) => edge.node);
```

Your component then renders the results using the `for:each` directive with the `Id` as the key.

## Display Your Data

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.

<!-- prettier-ignore -->
```html
<!-- simpleGQL.html -->
<template>
  <template lwc:if={results}>
    <template for:each={results} for:item="account">
      <div class="card-spacer" key={account.Id}>
        <lightning-card icon-name="standard:account" class="slds-var-m-around_medium">
          <h1 slot="title">{account.Name.value}</h1>
        </lightning-card>
      </div>
    </template>
  </template>
</template>
```

You can make your component [reactive to data changes](https://developer.salesforce.com/docs/platform/graphql/guide/graphql-wire-lwc-reactive.md), such as adding a dropdown that enables different query selection.

## See Also

[GraphQL Wire Adapter Best Practices](https://developer.salesforce.com/docs/platform/graphql/guide/graphql-wire-lwc-best.md)

[_Lightning Web Components Developer Guide_: lightning/graphql Wire Adapter (v2)](https://developer.salesforce.com/docs/platform/lwc/guide/reference-lightning-graphql-module.html)

[_Lightning Web Components Developer Guide_: lightning/uiGraphQLApi (v1)](https://developer.salesforce.com/docs/platform/lwc/guide/reference-lightning-graphql-api.html)