GraphQL in Salesforce LWC
Explained Visually

import { updateRecord } from 'lightning/uiRecordApi';

async handleUppercase(event) {
  const id = event.target.dataset.id;
  const current = this.accounts.find(a => a.Id === id);
  await updateRecord({
    fields: { Id: id, Name: current.Name.toUpperCase() }
  });
  await refreshGraphQL(this.wiredResult);
}

import { deleteRecord } from 'lightning/uiRecordApi';

async handleDelete(event) {
  const id = event.target.dataset.id;
  await deleteRecord(id);
  await refreshGraphQL(this.wiredResult); // sync the list
}

// KEY PATTERN: Always store the wire result for later refresh

wiredResult; // ← class property

@wire(graphql, { query: gql`...` })
handleQuery(result) {
  this.wiredResult = result; // ← store it HERE
  const { data, errors } = result;
  // ... process data
}

// Later, after any mutation:
await refreshGraphQL(this.wiredResult); // ← use stored ref

// Update requires both Id + the fields to change
const safeId   = JSON.stringify(id);
const safeName = JSON.stringify(current.Name.toUpperCase());

const mutation = gql`
  mutation UpdateAccount {
    uiapi {
      AccountUpdate(input: {        // ObjectUpdate pattern
        Id: ${`${`${`safeId`}`}`},                  // which record to update
        Account: { Name: ${`${`${`safeName`}`}`} }  // what to change
      }) {
        Record {                     // returns the updated record
          Id
          Name { value }
        }
      }
    }
  }
\`;

const result = await executeMutation({ query: mutation });
// LDS cache often updates automatically for updates, but refresh to be safe
await this.refreshGraphQL?.();

// Delete only needs the Id — no other fields required
const safeId = JSON.stringify(id);

const mutation = gql`
  mutation DeleteAccount {
    uiapi {
      AccountDelete(input: { Id: ${`${`${`safeId`}`}`} }) {  // ObjectDelete pattern
        Id   // returns just the Id of the deleted record
      }
    }
  }
\`;

const result = await executeMutation({ query: mutation });

// 💡 LDS auto-prunes deleted records from all active wires
// No explicit refresh needed — the list updates automatically!

// WHY: If a user types:  O'Brien "Co" \
// and you inject it raw: Name: O'Brien "Co" \
// → GraphQL parse error (broken string literal)

// gqlString() helper uses JSON.stringify() to escape safely:

gqlString(raw) {
  return JSON.stringify(raw ?? '');
}

// Examples:
// "Acme Corp"           →  '"Acme Corp"'        ✅ plain string
// "O'Brien Co"          →  '"O\'Brien Co"'       ✅ apostrophe escaped
// 'Test "Name"'         →  '"Test \\"Name\\""'   ✅ quotes escaped
// "Backslash \\ test"   →  '"Backslash \\\\ test"' ✅ backslash escaped

// Always escape BEFORE injecting into gql template literals
// This is your protection against GraphQL injection

query FilteredAccounts {
  uiapi {
    query {
      Account(
        where: {
          // Single field condition:
          Industry: { eq: "Technology" }

          // AND multiple conditions:
          and: [
            { Industry: { eq: "Technology" } }
            { AnnualRevenue: { gt: 1000000 } }
          ]

          // OR conditions:
          or: [
            { Industry: { eq: "Technology" } }
            { Industry: { eq: "Finance" } }
          ]

          // Contains (LIKE %word%):
          Name: { like: "%Salesforce%" }

          // Null check:
          AnnualRevenue: { isNull: false }
        }
      ) {
        edges { node { Id Name { value } } }
      }
    }
  }
}
// Operators: eq, ne, lt, lte, gt, gte, like, in, nin, isNull

query Top10Accounts {
  uiapi {
    query {
      Account(
        first: 10           // LIMIT — max records returned
        orderBy: {         // ORDER BY
          Name: { order: ASC }   // ASC or DESC
        }
      ) {
        edges {
          node {
            Id
            Name { value }
            CreatedDate { value displayValue }
          }
        }
      }
    }
  }
}

// Multi-field sort (primary + secondary):
// orderBy: { Industry: { order: ASC } Name: { order: ASC } }

// With a $after variable (cursor from previous page)
query PaginatedAccounts($after: String) {
  uiapi {
    query {
      Account(
        first: 10
        after: $after   // pass cursor from previous response
      ) {
        edges {
          cursor        // bookmark for this specific record
          node {
            Id
            Name { value }
          }
        }
        pageInfo {
          hasNextPage   // true if more records exist
          endCursor     // pass this as $after for next page
        }
        totalCount    // total matching records overall
      }
    }
  }
}
// In JS: pass variables: { after: this.endCursor } to @wire

query Account360($accountId: ID!) {
  uiapi {
    query {
      Account(where: { Id: { eq: $accountId } }) {
        edges {
          node {
            Id
            Name { value }
            Industry { value }

            // Child relationship — same edges/node pattern
            Contacts(first: 50 orderBy: { LastName: { order: ASC } }) {
              edges {
                node {
                  Id
                  Name { value }
                  Email { value }
                }
              }
              totalCount  // total contacts for this account
            }

            Opportunities(
              first: 50
              orderBy: { CloseDate: { order: DESC } }
              where: { IsClosed: { eq: false } }
            ) {
              edges {
                node {
                  Id
                  Name { value }
                  Amount { value displayValue }
                  StageName { value }
                }
              }
              totalCount
            }
          }
        }
      }
    }
  }
}
// REST equivalent: GET /accounts/id + GET /contacts?AccountId=id
//                + GET /opportunities?AccountId=id = 3 calls
// GraphQL: 1 call. Done.

query DashboardData {
  uiapi {
    query {
      // Object 1 — same query, side by side
      Account(first: 5 orderBy: { Name: { order: ASC } }) {
        edges { node { Id Name { value } Industry { value } } }
      }

      // Object 2 — completely separate object in the same request
      Contact(first: 5) {
        edges { node { Id FirstName { value } LastName { value } } }
      }

      // Object 3 — with its own filter
      Opportunity(
        first: 5
        where: { StageName: { eq: "Closed Won" } }
      ) {
        edges { node { Id Name { value } Amount { displayValue } } }
      }
    }
  }
}
// 3 objects, 1 API call. REST equivalent: 3 separate calls.

// STEP 1: Declare variable in query ($ prefix, type with !)
query FilterByStage($stage: String!, $minAmount: Decimal) {
  uiapi {
    query {
      Opportunity(
        where: {
          StageName: { eq: $stage }
          Amount: { gte: $minAmount }
        }
      ) {
        edges { node { Id Name { value } Amount { displayValue } } }
      }
    }
  }
}

// STEP 2: In your LWC JS — reactive getter
get variables() {
  return {
    stage: this.selectedStage,      // from UI picklist
    minAmount: this.minimumAmount   // from UI input
  };
}

// STEP 3: Wire it up
@wire(graphql, {
  query: gql`...the query above...`,
  variables: '$variables'  // reactive — reruns when getter returns new value
})
handleResult(result) { ... }