Best Practices for Using GraphQL in LWC Offline

There are a number of best practices to be aware of when using GraphQL in your offline-ready components and apps.

In addition to the general best practices detailed in GraphQL Wire Adapter Best Practices, we want to call your attention to two specific practices that are especially important for the Offline GraphQL implementation.

Provide Query and Variables via Getter Function

To make the results of a GraphQL query primable, you must use a specific structure in your code. This structure is specifically required for the GQL query to be discovered and processed by the static analyzer used by the priming subsystem. Do not inline the query with your wire adapter function definition.

For example, this code results in a query that can be analyzed and primed:

1// BEST PRACTICE
2// This GQL query can be primed
3@wire(graphql, {
4  query: '$myQuery',
5  variables: '$myVariables'
6}) 
7wiredData;
8
9get myQuery() {
10   return gql`query getSomeAccount($recordId: ID) {
11              uiapi { query { Account(...) { } } }`; 
12}
13get myVariables() { return { recordId: '...' } }

In contrast, this example behaves the same as the preceding code, as long as you’re online, but does not result in the wire adapter results being primed. If the required data and metadata isn’t primed by some other mechanism, it won’t function while you’re offline.

1// ANTI-PATTERN
2// This inline GQL query cannot be primed
3@wire(graphql, {
4  query: gql`query getSomeAccount($recordId: ID) {
5             uiapi { query { Account(...) { } } }`,
6  variables: {recordId: '...'}
7}) 
8wiredData;

Delay Query Execution

This best practice is closely related to using getters to provide the GQL query string and variables, and uses the same code structures. It’s similarly essential to maximizing the completeness of priming activities performed by the mobile app prior to going offline. The details are described in Delay Query Execution in the GraphQL API Developer Guide.

Mobile and Offline Developer Guide

Best Practices for Using GraphQL in LWC Offline

Provide Query and Variables via Getter Function

Delay Query Execution