
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-recordsAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 1 |
|---|---|
| repo stars | ★ 787 |
| Last updated | August 5, 2026 |
| Repository | forcedotcom/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
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, callrefetch()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)
| Concern | Where |
|---|---|
| API: list + create | e.g. src/api/<objectName>Api.ts — query function (GraphQL) and create function (createRecord) |
| Hook: list + refetch | e.g. src/hooks/use<ObjectName>List.ts — returns { items, loading, error, refetch } |
| Page | Form (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.