Attention, Salesforce Developers! We have been dabbling in GraphQL for some time now, and we’re taking things to the next level. A few months ago, we announced the pilot launch of the GraphQL Wire Adapter. Hold on to your brackets because we’re rolling out the Salesforce GraphQL Wire Adapter Beta version in our Summer ’23 release. In this blog, we’ll explore what’s new in the Beta and how to use LWC Recipes to easily build your Salesforce app powered by GraphQL.

The Beta version of the GraphQL Wire Adapter is a significant advancement in managing Salesforce data in LWCs. With the introduction of new features, such as LWC Recipes, Data Refresh, and Referential Integrity, the development process has become more streamlined and efficient.

The GraphQL wire adapter allows for querying Salesforce data using expressive queries with functionalities like filtering, sorting, pagination, and following parent/child relationships. It also includes a client-side caching and data management layer from the Lightning Data Service. These features enhance the efficiency and speed of Salesforce data access from your LWC web and mobile apps.

The GraphQL wire adapter interfaces with the Salesforce GraphQL API, which exposes all standard and custom objects available via UI API, along with object metadata. The API also maintains the object-level and field-level security of the current user during query execution.

To familiarize yourself with the GraphQL API schema, we suggest reviewing the schema documentation using the Altair GraphQL Client. The tooling available in this client makes it easier to compose your GraphQL query and validate it. Then you can copy and paste your query directly into your JavaScript code in Visual Studio Code.

What’s new in Beta:

  1. LWC Recipes: These are ready-to-use components showcasing various GraphQL use cases
  2. Data refresh: A mechanism for refreshing the data returned by your GraphQL query
  3. Referential integrity: This mechanism ensures data consistency and references to Salesforce resources, such as entities and fields, are robust

Let’s discuss each of these features in detail.

LWC Recipes

LWC Recipes is a GitHub repository with a collection of publicly available code examples for Lightning Web Components. It includes three GraphQL recipes to help you quickly get started on building your Salesforce app with GraphQL.

The repository provides instructions on setting up your environment, creating your Salesforce org, cloning the repository to your local machine, and deploying the app to your org. The source code can be directly imported into your Visual Studio Code as a project that you can customize to your needs.

Once you deploy the LWC Recipes app to your Salesforce org, you may see the following components using GraphQL queries.

LWC Recipes app deployed to a Salesforce org

Here’s an overview of the four LWC components using GraphQL queries:

  • graphqlContacts: Fetches contacts that meet certain criteria, sorted by name and limited to the first five records
  • graphqlVariables: Captures the user’s input in a search bar in a variable and composes a query to return contacts whose name partially matches the input string
  • graphqlRefresh: Fetches a number of employees in an account and refreshes the data on user click
  • graphqlPagination: Enables pagination through a list of contacts

Since many of our customers ask about pagination, let’s dive a bit deeper into it. The GraphQL wire adapter supports GraphQL’s cursor-based pagination. You can page through your query results and control the number of results you want to return each time. To specify the number of records to return, use the first argument. The default number is 10.

If hasNextPage is true, you can supply the value of endCursor to the after argument of a subsequent query to request the next page of results.

Here’s a screenshot of how the LWC Recipes project might look in Visual Studio Code. You can see an example code for pagination implementation.

LWC Recipes project in Visual Studio Code

Data refresh

In the world of app development, displaying up-to-date data is critical for a good user experience and for building trust. Hence, in the Beta version of the GraphQL Wire Adapter, we’ve introduced the refreshGraphQL function.

This function allows developers to manually trigger a rerun of the query. The result? An update to the data provided by the GraphQL wire adapter, ensuring that users always see the most current data.

This refresh can be triggered on demand, such as a button click from a user or a specific JavaScript event. This means that you can optimize your app to refresh only when necessary, providing an efficient way to keep data current while maximizing app performance. In a nutshell, the refreshGraphQL function delivers a performance-friendly method to maintain fresh data, enhancing user experience and boosting app reliability.

Here’s an example usage:

Checkout the graphqlRefresh component in the LWC Recipes for another example of using the data refresh function.

Referential Integrity

The Beta release of the GraphQL Wire Adapter introduces referential integrity. Here’s a brief overview of its benefits and implications.

The Lightning Data Service (LDS), Salesforce’s client-side data management layer, improves app efficiency by allowing components to share data, reducing server calls and maintaining data consistency. It also ensures robust references to Salesforce resources, propagating name changes and preventing deletions when references persist.

In the adapter’s pilot version, we required the use of @category directives to help LDS understand the data schema and normalize your GraphQL data.

However, in the Beta release, these directives are no longer manually required. If they were previously used, they can now be removed from your GraphQL queries. The compiler autonomously manages these directives, streamlining your code process and reducing potential manual errors.

What’s next for GraphQL

Reminder: Salesforce is a publicly traded company, and customers should base their purchasing decisions on products and services that are currently available.

We’re committed to continuing to invest in GraphQL. Here’s what you can expect in upcoming releases (forward-looking statement applies):

Winter ’24:

  • GraphQL Wire Adapter (GA)
  • Mutations support in GraphQL API
  • Aggregate query support in GraphQL Adapter
  • Tasks and Events queryability in GraphQL API (Beta)

Spring ’24 and Beyond:

  • Mutations support in GraphQL Adapter
  • Advanced pagination features
  • Optional fields support

Developer Resources

About the author

Suvda Myagmar is a Director of Product Management at Salesforce who’s passionate about Data and AI platforms. She loves long runs while listening to audiobooks.

Get the latest Salesforce Developer blog posts and podcast episodes via Slack or RSS.

Add to Slack Subscribe to RSS