Introduction

This LWC shows how to refresh data previously retrieved using a GraphQL query .

<aside> 💡 If not familiar on how to use the GraphQL wire adapter, review this section: Using GraphQL in LWC and with wire adapter . Also please review the section for reloading results Refreshing the cached data ad-hoc with refreshGraphQL.

</aside>

<aside> 📂 You can find the component in this folder: force-app\\main\\default\\lwc\\graphqlRefresh.

</aside>

Javascript file

When using the GraphQL wire adapter some imports are required. Take special attention to the refreshGraphQL module, what allows refreshing ad-hoc the results from a GraphQL query.

import { gql, graphql, refreshGraphQL } from 'lightning/uiGraphQLApi';
import randomizeAccountData from '@salesforce/apex/AccountController.randomizeAccountData';

The Apex method used is just to get another Account Id.

The syntax for using the wire adapter is as follows:

	...
	@wire(graphql, {
        query: gql`
            query getAccount {
                uiapi {
                    query {
                        Account(
                            where: { Name: { eq: "Alpha Dynamics" } }
                            first: 1
                        ) {
                            edges {
                                node {
                                    Id
                                    Name {
                                        value
                                    }
                                    NumberOfEmployees {
                                        value
                                    }
                                }
                            }
                        }
                    }
                }
            }
        `
    })
    wiredValues(result) {
    ...
	  //here all the logic once the query has been executed

This GraphQL query requests the account Id, Name and the NumberOfEmployees attributes. The following JSON output clarifies how the query returns the results if you add this console command console.log(JSON.stringify(result)):

{"data":
	{"uiapi":
		{"query":
			{"Account":
				{"edges":
					[{"node":
						{
							"Id":"0010600002AjjYrAAJ",
							"Name":{"value":"Alpha Dynamics"},
							"NumberOfEmployees":{"value":2471}
						}
					}]
}}}}}

As soon as the LWC is loaded, the query is executed, and the wiredValues bind function is also executed, receiving the query resultvariable as input.

This variable is destructured, taking the result object and assigns the errors and the data results to the errorsand data local variables.

If result.data is not empty, all accounts received are assigned to the accounts const object . This seems not to be strictly necessary as the GraphQL query is limiting results to only one account using the filter first: 1 , but let’s assume then that this code is more robust in this way.

Finally, only the first account in the accounts object is copied to the account class property, which is used in the template to show the Nameand NumberOfEmployees values to the user.

If again the console command is used, the account data looks like this:

{"Id":"0010600002AjjYrAAJ","Name":"Alpha Dynamics","NumberOfEmployees":92953}

This is the altered code with the console commands:

...
	wiredValues(result) {
      console.log(JSON.stringify(result)); //Added for explanation
      this.isLoading = false;
      this.account = undefined;
      this.errors = undefined;
			
      // We hold a direct reference to the graphQL query result
      // so that we can refresh it with refreshGraphQL
      this.graphqlQueryResult = result;

      const { errors, data } = result;
      if (data) {
          const accounts = data.uiapi.query.Account.edges.map((edge) => ({
              Id: edge.node.Id,
              Name: edge.node.Name.value,
              NumberOfEmployees: edge.node.NumberOfEmployees.value
          }));
          if (accounts.length === 0) {
              this.errors = [`Couldn't find account.`];
          } else {
              this.account = accounts[0];
							**console.log(JSON.stringify(this.account));**
          }
      }
      if (errors) {
          this.errors = errors;
      }
  }

...