refactor: use lightning/graphql (#1059)

* refactor: use lightning/graphql

* wip

* fix: refresh

* fix: lint

* fix: prettier

Author: scarrawaySF

force-app/main/default/lwc/graphqlContacts/__tests__/graphqlContacts.test.js

@@ -1,6 +1,6 @@
 import { createElement } from 'lwc';
 import GraphqlContacts from 'c/graphqlContacts';
-import { graphql } from 'lightning/uiGraphQLApi';
+import { graphql } from 'lightning/graphql';
 
 // Mock realistic data
 const mockGraphQL = require('./data/graphqlContactsResponse.json');

force-app/main/default/lwc/graphqlContacts/graphqlContacts.js

@@ -1,5 +1,5 @@
 import { LightningElement, wire } from 'lwc';
-import { gql, graphql } from 'lightning/uiGraphQLApi';
+import { gql, graphql } from 'lightning/graphql';
 
 export default class GraphqlContacts extends LightningElement {
     @wire(graphql, {

force-app/main/default/lwc/graphqlMultipleObjects/__tests__/graphqlMultipleObjects.test.js

@@ -1,6 +1,6 @@
 import { createElement } from 'lwc';
 import GraphqlMultipleObjects from 'c/graphqlMultipleObjects';
-import { graphql } from 'lightning/uiGraphQLApi';
+import { graphql } from 'lightning/graphql';
 
 // Mock realistic data
 const mockGraphQL = require('./data/graphqlMultipleObjectsResponse.json');

force-app/main/default/lwc/graphqlMultipleObjects/graphqlMultipleObjects.js

@@ -1,5 +1,5 @@
 import { LightningElement, wire } from 'lwc';
-import { gql, graphql } from 'lightning/uiGraphQLApi';
+import { gql, graphql } from 'lightning/graphql';
 
 export default class GraphqlMultipleObjects extends LightningElement {
     @wire(graphql, {

force-app/main/default/lwc/graphqlPagination/__tests__/graphqlPagination.test.js

@@ -1,6 +1,6 @@
 import { createElement } from 'lwc';
 import GraphqlPagination from 'c/graphqlPagination';
-import { graphql } from 'lightning/uiGraphQLApi';
+import { graphql } from 'lightning/graphql';
 
 // Mock realistic data
 const mockGraphQLFirstPage = require('./data/graphqlPaginationResponseFirstPage.json');

force-app/main/default/lwc/graphqlPagination/graphqlPagination.js

@@ -1,5 +1,5 @@
 import { LightningElement, wire } from 'lwc';
-import { gql, graphql } from 'lightning/uiGraphQLApi';
+import { gql, graphql } from 'lightning/graphql';
 
 const pageSize = 3;
 

force-app/main/default/lwc/graphqlRefresh/__tests__/graphqlRefresh.test.js

@@ -1,6 +1,6 @@
 import { createElement } from 'lwc';
 import GraphqlRefresh from 'c/graphqlRefresh';
-import { graphql, refreshGraphQL } from 'lightning/uiGraphQLApi';
+import { graphql } from 'lightning/graphql';
 import randomizeAccountData from '@salesforce/apex/AccountController.randomizeAccountData';
 
 // Mock realistic data
@@ -21,18 +21,6 @@ jest.mock(
     { virtual: true }
 );
 
-// Mock uiGraphQLApi module
-jest.mock(
-    '@salesforce/uiGraphQLApi',
-    () => {
-        // Inject a refreshGraphQL mock
-        return {
-            refreshGraphQL: jest.fn(() => Promise.resolve())
-        };
-    },
-    { virtual: true }
-);
-
 describe('c-graphql-refresh', () => {
     afterEach(() => {
         // The jsdom instance is shared across test cases in a single file so reset the DOM
@@ -149,15 +137,16 @@ describe('c-graphql-refresh', () => {
     });
 
     describe('graphql refresh', () => {
-        it('calls refreshGraphQL when refresh is clicked', async () => {
+        it('calls this.refreshGraphQL when refresh is clicked', async () => {
             // Create component
             const element = createElement('c-graphql-refresh', {
                 is: GraphqlRefresh
             });
             document.body.appendChild(element);
 
+            const refreshGraphQL = jest.fn().mockResolvedValue();
             // Emit data from @wire
-            graphql.emit(mockGraphQL);
+            graphql.emit(mockGraphQL, () => true, refreshGraphQL);
 
             // Wait for any asynchronous DOM updates
             await flushPromises();

force-app/main/default/lwc/graphqlRefresh/graphqlRefresh.js

@@ -1,12 +1,13 @@
 import { LightningElement, wire } from 'lwc';
-import { gql, graphql, refreshGraphQL } from 'lightning/uiGraphQLApi';
+import { gql, graphql } from 'lightning/graphql';
 import randomizeAccountData from '@salesforce/apex/AccountController.randomizeAccountData';
 
 export default class GraphqlRefresh extends LightningElement {
     graphqlResult;
     account;
     errors;
     isLoading = true;
+    refreshGraphQL;
 
     @wire(graphql, {
         query: gql`
@@ -39,10 +40,11 @@ export default class GraphqlRefresh extends LightningElement {
         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;
+        const { errors, data, refresh } = result;
+        // We hold a reference to the refresh function on the graphQL query result so we can call it later.
+        if (refresh) {
+            this.refreshGraphQL = refresh;
+        }
         if (data) {
             const accounts = data.uiapi.query.Account.edges.map((edge) => ({
                 Id: edge.node.Id,
@@ -74,7 +76,7 @@ export default class GraphqlRefresh extends LightningElement {
     async handleRefreshClick() {
         this.isLoading = true;
         try {
-            await refreshGraphQL(this.graphqlQueryResult);
+            await this.refreshGraphQL?.();
         } catch (e) {
             this.errors = e;
         } finally {

force-app/main/default/lwc/graphqlVariables/__tests__/graphqlVariables.test.js

@@ -1,6 +1,6 @@
 import { createElement } from 'lwc';
 import GraphqlVariables from 'c/graphqlVariables';
-import { graphql } from 'lightning/uiGraphQLApi';
+import { graphql } from 'lightning/graphql';
 
 // Mock realistic data
 const mockGraphQL = require('./data/graphqlVariablesResponse.json');

force-app/main/default/lwc/graphqlVariables/graphqlVariables.js

@@ -1,5 +1,5 @@
 import { LightningElement, wire } from 'lwc';
-import { gql, graphql } from 'lightning/uiGraphQLApi';
+import { gql, graphql } from 'lightning/graphql';
 
 /** The delay used when debouncing event handlers before invoking Apex. */
 const DELAY = 300;