Now liveThe Skillselion MCP - thousands of ranked skills, loaded into your agent mid-task. No install.Get it →
forcedotcom avatar

Salesforce Web App List And Create Records

  • 1 installs
  • 787 repo stars
  • Updated August 5, 2026
  • forcedotcom/afv-library

Implements list-and-create for Salesforce custom objects in React apps using GraphQL queries plus createRecord with refetch after create.

About

Guides building a list-and-create pattern for custom objects: query via GraphQL, create via createRecord, and refetch so the list updates without a reload. A developer uses it to build record tables with an add form in a Salesforce React app.

  • One hook fetches the list and exposes refetch called after create
  • Picklist form options must match the object's value set

Salesforce Web App List And Create Records by the numbers

  • 1 all-time installs (skills.sh)
  • Ranked #3,836 of 4,347 Backend & APIs skills by installs in the Skillselion catalog
  • Data as of Aug 5, 2026 (Skillselion catalog sync)
npx skills add https://github.com/forcedotcom/afv-library --skill salesforce-web-app-list-and-create-records

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

Listed on Skillselion
Installs1
repo stars787
Last updatedAugust 5, 2026
Repositoryforcedotcom/afv-library

What it does

Implements list-and-create for Salesforce custom objects in React apps using GraphQL queries plus createRecord with refetch after create.

Files

SKILL.mdMarkdownGitHub ↗

When to Use This Skill

Use this skill when you need to:

  • Implement list and create functionality for custom objects
  • Build GraphQL queries for listing records
  • Create records and update lists without page reload
  • Troubleshoot deployment errors related to list and create operations

List and create records (webApplication)

Pattern

  • List: Query the object via GraphQL (executeGraphQL, uiapi.query.ObjectApiName__c). Use webApplicationFeature (GraphQL) for the connection shape (first/after, edges.node, field { value, displayValue }). Map nodes to a simple summary type; sort client-side by date or other field if needed.
  • Create: Use createRecord from @salesforce/webapp-experimental/api. See webApplicationCreatingRecords for required/optional fields and id handling.
  • Hook: One hook that fetches the list on mount and exposes refetch. After a successful create, call refetch() so the list updates without a full page reload.
  • Form: Collect only fields that exist on the object. For picklist fields, use option values that match the object's value set (e.g. from the object's field metadata or a known value set). Default required picklists (e.g. Status to "New", Priority to "Standard") when the object defines defaults.
  • UI: Table or cards for the list; form above or on a separate route. Show loading and error states for both list and submit. Optional: dashboard widget showing a slice of the list (e.g. first N items) with a "See all" link.

Structure (generic)

ConcernWhere
API: list + createe.g. src/api/<objectName>Api.ts — query function (GraphQL) and create function (createRecord)
Hook: list + refetche.g. src/hooks/use<ObjectName>List.ts — returns { items, loading, error, refetch }
PageForm (controlled inputs, submit → create → refetch) and table/list of items

Cross-references

  • webApplicationFeature — Feature packages including GraphQL (connection shape, node shape, field value extraction).
  • webApplicationCreatingRecords — createRecord, id extraction, only send existing fields, picklist/required handling.

Related skills

Backend & APIsintegrationsfrontend

This week in AI coding

Five minutes, every Monday - the tools, releases and tactics for developers.

unsubscribe anytime.