Introduction

This LWC shows how to retrieve a list of contacts using a GraphQL query with the GraphQL wire adapter and shows these contacts details in a child component.

<aside> 💡 If not familiar with the GraphQL wire adapter, review this section: Using GraphQL in LWC and with wire adapter .

</aside>

Where to find this LWC

<aside> 📂 You can find the parent component using the wire adapter here force-app\\main\\default\\lwc\\graphqlContacts and the child component force-app\\main\\default\\lwc\\contactTile.

</aside>

Description

Child Component

The contactTile child LWC shows the picture, the avatar, the name, the title, and the phone from the contact selected. This is mostly done in its template:

<template lwc:if={contact}>
    <lightning-layout vertical-align="center">
        <lightning-layout-item>
            <img
                lwc:if={contact.Picture__c}
                src={contact.Picture__c}
                alt="Profile photo"
            />
            <lightning-icon
                lwc:else
                icon-name="standard:avatar"
                alternative-text="Missing profile photo"
                size="medium"
                title="Missing profile photo"
            ></lightning-icon>
        </lightning-layout-item>
        <lightning-layout-item padding="around-small">
            <p>{contact.Name}</p>
            <p>{contact.Title}</p>
            <p>
                <lightning-formatted-phone
                    value={contact.Phone}
                ></lightning-formatted-phone>
            </p>
        </lightning-layout-item>
    </lightning-layout>
</template>

The JavaScript file declares the contact property that the parent will use to provide the values:

import { LightningElement, api } from 'lwc';

export default class ContactTile extends LightningElement {
    @api contact;
}

Parent component

Javascript

When using the GraphQL wire adapter, some imports are required:

import { gql, graphql } from 'lightning/uiGraphQLApi';

The syntax for using the wire adapter is as follows:

	...
	@wire(graphql, {
      query: gql`
          query getContacts {
              uiapi {
                  query {
                      Contact(
	                      where: { Picture__c: { ne: null } }
                        first: 5
                        orderBy: { Name: { order: ASC } }
                      ) {
                          edges {
                              node {
                                  Id
                                  Name {
                                      value
                                  }
                                  Phone {
                                      value
                                  }
                                  #An alias is used
                                  Picture__c: Picture__c { 
	                                    value
                                  }
                                  Title {
                                      value
                                  }
                              }
                          }
                      }
                  }
              }
          }
      `
  })
  graphqlVar; // I have changed this variable name to avoid any confusion with the import
...

In the query the Contact object is queried to get the first 5 Contacts with picture ordered ascending by name.

The fields retrieved are inside the edges { node { ... structure.

The fields Name, Phone and Title require the value attribute to be specified as some other attributes might be exposed too. The picture field is also retrieved but using an alias as this is a custom field that could change its name.