@salesforce/webapp-template-feature-react-chart-experimental 1.105.1 → 1.106.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,155 +0,0 @@
1
- ---
2
- name: implementing-graphql-data-access
3
- description: Add or modify Salesforce GraphQL data access code. Use when the user asks to fetch, query, or mutate Salesforce data, or add a GraphQL operation for an object like Account, Contact, or Opportunity.
4
- ---
5
-
6
- # GraphQL Data Access
7
-
8
- Add or modify Salesforce GraphQL data access code using `getDataSDK()` + `data.graphql?.()` and codegen tooling.
9
-
10
- ## When to Use
11
-
12
- - User asks to "fetch data from Salesforce"
13
- - User asks to "query" or "mutate" Salesforce records
14
- - User wants to add a new GraphQL operation (query or mutation)
15
- - User asks to add data access for a Salesforce object (Account, Contact, Opportunity, etc.)
16
-
17
- ## Prerequisites
18
-
19
- The base React app (`base-react-app`) ships with all GraphQL dependencies and tooling pre-configured:
20
-
21
- - `@salesforce/sdk-data` — runtime SDK for `getDataSDK` and `gql`
22
- - `@graphql-codegen/cli` + plugins — type generation from `.graphql` files and inline `gql` queries
23
- - `@graphql-eslint/eslint-plugin` — linting for `.graphql` files and `gql` template literals
24
- - `graphql` — shared by codegen, ESLint, and schema introspection
25
-
26
- Before using this skill, ensure:
27
-
28
- 1. The `@salesforce/sdk-data` package is available (provides `getDataSDK`, `gql`, `NodeOfConnection`)
29
- 2. A `schema.graphql` file exists at the project root. If missing, generate it:
30
- ```bash
31
- npm run graphql:schema
32
- ```
33
-
34
- ## npm Scripts
35
-
36
- The base app provides two npm scripts for GraphQL tooling:
37
-
38
- - **`npm run graphql:schema`** — Downloads the full GraphQL schema from a connected Salesforce org via introspection. Outputs `schema.graphql` to the project root.
39
- - **`npm run graphql:codegen`** — Generates TypeScript types from `.graphql` files and inline `gql` queries. Outputs to `src/api/graphql-operations-types.ts`.
40
-
41
- ## Workflow
42
-
43
- ### Step 1: Explore the Schema
44
-
45
- Before writing any query, verify the target object and its fields exist in the schema.
46
-
47
- See `docs/explore-schema.md` for detailed guidance on exploring the Salesforce GraphQL schema.
48
-
49
- Key actions:
50
-
51
- - Search `schema.graphql` for `type <ObjectName> implements Record` to find available fields
52
- - Search for `input <ObjectName>_Filter` for filter options
53
- - Search for `input <ObjectName>_OrderBy` for sorting options
54
- - For mutations: search for `input <ObjectName>CreateInput` or `<ObjectName>UpdateInput`
55
-
56
- ### Step 2: Choose the Query Pattern
57
-
58
- **Pattern 1 — External `.graphql` file** (recommended for complex queries):
59
-
60
- - Queries with variables, fragments, or shared across files
61
- - Enables full codegen type generation
62
- - See example: `api/utils/accounts.ts` + `api/utils/query/highRevenueAccountsQuery.graphql`
63
-
64
- **Pattern 2 — Inline `gql` tag** (recommended for simple queries):
65
-
66
- - Simple queries without variables
67
- - Colocated with usage code
68
- - See example: `api/utils/user.ts`
69
-
70
- ### Step 3: Write the Query
71
-
72
- For **Pattern 1**:
73
-
74
- 1. Create a `.graphql` file under `src/api/utils/query/`
75
- 2. Follow UIAPI structure: `query { uiapi { query { ObjectName(...) { edges { node { ... } } } } } }`
76
- 3. For mutations, see `docs/generate-mutation-query.md`
77
- 4. For read queries, see `docs/generate-read-query.md`
78
-
79
- For **Pattern 2**:
80
-
81
- 1. Define query inline using the `gql` template tag
82
- 2. Ensure the query name matches what codegen expects
83
-
84
- ### Step 4: Generate Types
85
-
86
- ```bash
87
- npm run graphql:codegen
88
- ```
89
-
90
- This updates `src/api/graphql-operations-types.ts` with:
91
-
92
- - `<OperationName>Query` or `<OperationName>Mutation` — response type
93
- - `<OperationName>QueryVariables` or `<OperationName>MutationVariables` — input variables type
94
-
95
- ### Step 5: Implement the Data Access Function
96
-
97
- ```typescript
98
- // Pattern 1
99
- import { getDataSDK, type NodeOfConnection } from "@salesforce/sdk-data";
100
- import MY_QUERY from "./query/myQuery.graphql?raw";
101
- import type { GetMyDataQuery, GetMyDataQueryVariables } from "../graphql-operations-types";
102
-
103
- type MyNode = NodeOfConnection<GetMyDataQuery["uiapi"]["query"]["MyObject"]>;
104
-
105
- export async function getMyData(variables: GetMyDataQueryVariables): Promise<MyNode[]> {
106
- const data = await getDataSDK();
107
- const response = await data.graphql?.<GetMyDataQuery, GetMyDataQueryVariables>(
108
- MY_QUERY,
109
- variables,
110
- );
111
-
112
- if (response?.errors?.length) {
113
- const errorMessages = response.errors.map((e) => e.message).join("; ");
114
- throw new Error(`GraphQL Error: ${errorMessages}`);
115
- }
116
-
117
- return response?.data?.uiapi?.query?.MyObject?.edges?.map((edge) => edge?.node) || [];
118
- }
119
- ```
120
-
121
- ```typescript
122
- // Pattern 2
123
- import { getDataSDK, gql } from "@salesforce/sdk-data";
124
- import type { MySimpleQuery } from "../graphql-operations-types";
125
-
126
- const MY_QUERY = gql`
127
- query MySimple {
128
- uiapi { ... }
129
- }
130
- `;
131
-
132
- export async function getSimpleData(): Promise<SomeType> {
133
- const data = await getDataSDK();
134
- const response = await data.graphql?.<MySimpleQuery>(MY_QUERY);
135
- // check response.errors, then extract response.data
136
- }
137
- ```
138
-
139
- ### Step 6: Verify
140
-
141
- - [ ] Query field names match the schema exactly (case-sensitive)
142
- - [ ] Response type generic is provided to `data.graphql?.<T>()`
143
- - [ ] Optional chaining is used for nested response data
144
- - [ ] Pattern 1: `.graphql` file imported with `?raw` suffix
145
- - [ ] Pattern 2: Query uses `gql` tag (not plain string)
146
- - [ ] Generated types imported from `graphql-operations-types.ts`
147
-
148
- ## Reference
149
-
150
- - Schema exploration: `docs/explore-schema.md`
151
- - Read query generation: `docs/generate-read-query.md`
152
- - Mutation query generation: `docs/generate-mutation-query.md`
153
- - Shared GraphQL schema types: `docs/shared-schema.graphqls`
154
- - Schema download: `npm run graphql:schema` (in the base app)
155
- - Type generation: `npm run graphql:codegen` (in the base app)
@@ -1,256 +0,0 @@
1
- # GraphQL Schema Reference
2
-
3
- This document provides guidance for AI agents working with the Salesforce GraphQL API schema in this project.
4
-
5
- ## Schema File Location
6
-
7
- **The complete GraphQL schema is located at: `@schema.graphql`** (in the project root)
8
-
9
- > ⚠️ **Important**: The schema file is very large (~265,000+ lines). Do NOT read it entirely. Instead, use targeted searches to find specific types, fields, or operations.
10
-
11
- If the file is not present, generate it by running:
12
-
13
- ```bash
14
- npm run graphql:schema
15
- ```
16
-
17
- ## Required Pre-Flight Check
18
-
19
- **BEFORE generating any GraphQL query, you MUST:**
20
-
21
- 1. **Check if schema exists**: Look for `schema.graphql` in the project root
22
- 2. **If schema is missing**:
23
- - Run `npm run graphql:schema` to download it
24
- - Wait for the command to complete successfully
25
- - Then proceed with schema exploration
26
- 3. **If schema exists**: Proceed with targeted searches as described below
27
-
28
- > ⚠️ **DO NOT** generate GraphQL queries without first having access to the schema. Standard field assumptions may not match the target org's configuration.
29
-
30
- ## Schema Structure Overview
31
-
32
- The schema follows the Salesforce GraphQL Wire Adapter pattern with these main entry points:
33
-
34
- ### Query Entry Point
35
-
36
- ```graphql
37
- type Query {
38
- uiapi: UIAPI!
39
- }
40
- ```
41
-
42
- ### UIAPI Structure
43
-
44
- ```graphql
45
- type UIAPI {
46
- query: RecordQuery! # For querying records
47
- aggregate: RecordQueryAggregate! # For aggregate queries
48
- objectInfos: [ObjectInfo] # For metadata
49
- relatedListByName: RelatedListInfo
50
- }
51
- ```
52
-
53
- ### Mutation Entry Point
54
-
55
- ```graphql
56
- type Mutation {
57
- uiapi(input: UIAPIMutationsInput): UIAPIMutations!
58
- }
59
- ```
60
-
61
- ## How to Explore the Schema
62
-
63
- When you need to build a GraphQL query, use these search patterns:
64
-
65
- ### 1. Find Available Fields for a Record Type
66
-
67
- Search for `type <ObjectName> implements Record` to find all queryable fields:
68
-
69
- ```bash
70
- # Example: Find Account fields
71
- grep "^type Account implements Record" schema.graphql -A 50
72
- ```
73
-
74
- ### 2. Find Filter Options for a Record Type
75
-
76
- Search for `input <ObjectName>_Filter` to find filterable fields and operators:
77
-
78
- ```bash
79
- # Example: Find Account filter options
80
- grep "^input Account_Filter" schema.graphql -A 30
81
- ```
82
-
83
- ### 3. Find OrderBy Options
84
-
85
- Search for `input <ObjectName>_OrderBy` for sorting options:
86
-
87
- ```bash
88
- # Example: Find Account ordering options
89
- grep "^input Account_OrderBy" schema.graphql -A 20
90
- ```
91
-
92
- ### 4. Find Mutation Operations
93
-
94
- Search for operations in `UIAPIMutations`:
95
-
96
- ```bash
97
- # Example: Find Account mutations
98
- grep "Account.*Create\|Account.*Update\|Account.*Delete" schema.graphql
99
- ```
100
-
101
- ### 5. Find Input Types for Mutations
102
-
103
- Search for `input <ObjectName>CreateInput` or `input <ObjectName>UpdateInput`:
104
-
105
- ```bash
106
- # Example: Find Account create input
107
- grep "^input AccountCreateInput" schema.graphql -A 30
108
- ```
109
-
110
- ## Common Operator Types
111
-
112
- ### StringOperators (for text fields)
113
-
114
- ```graphql
115
- input StringOperators {
116
- eq: String # equals
117
- ne: String # not equals
118
- like: String # pattern matching (use % as wildcard)
119
- lt: String # less than
120
- gt: String # greater than
121
- lte: String # less than or equal
122
- gte: String # greater than or equal
123
- in: [String] # in list
124
- nin: [String] # not in list
125
- }
126
- ```
127
-
128
- ### OrderByClause
129
-
130
- ```graphql
131
- input OrderByClause {
132
- order: ResultOrder # ASC or DESC
133
- nulls: NullOrder # FIRST or LAST
134
- }
135
- ```
136
-
137
- ## Query Pattern Examples
138
-
139
- ### Basic Query Structure
140
-
141
- All record queries follow this pattern:
142
-
143
- ```graphql
144
- query {
145
- uiapi {
146
- query {
147
- <ObjectName>(
148
- first: Int # pagination limit
149
- after: String # pagination cursor
150
- where: <Object>_Filter
151
- orderBy: <Object>_OrderBy
152
- ) {
153
- edges {
154
- node {
155
- Id
156
- <Field> { value }
157
- # ... more fields
158
- }
159
- }
160
- }
161
- }
162
- }
163
- }
164
- ```
165
-
166
- ### Example: Query Accounts with Filter
167
-
168
- ```graphql
169
- query GetHighRevenueAccounts($minRevenue: Currency) {
170
- uiapi {
171
- query {
172
- Account(
173
- where: { AnnualRevenue: { gt: $minRevenue } }
174
- orderBy: { AnnualRevenue: { order: DESC } }
175
- first: 50
176
- ) {
177
- edges {
178
- node {
179
- Id
180
- Name {
181
- value
182
- }
183
- AnnualRevenue {
184
- value
185
- }
186
- Industry {
187
- value
188
- }
189
- }
190
- }
191
- }
192
- }
193
- }
194
- }
195
- ```
196
-
197
- ### Mutation Pattern
198
-
199
- ```graphql
200
- mutation CreateAccount($input: AccountCreateInput!) {
201
- uiapi(input: { AccountCreate: { input: $input } }) {
202
- AccountCreate {
203
- Record {
204
- Id
205
- Name {
206
- value
207
- }
208
- }
209
- }
210
- }
211
- }
212
- ```
213
-
214
- ## Field Value Wrappers
215
-
216
- Salesforce GraphQL returns field values wrapped in typed objects:
217
-
218
- | Wrapper Type | Access Pattern |
219
- | --------------- | ---------------------------------- |
220
- | `StringValue` | `FieldName { value }` |
221
- | `IntValue` | `FieldName { value }` |
222
- | `BooleanValue` | `FieldName { value }` |
223
- | `DateTimeValue` | `FieldName { value displayValue }` |
224
- | `PicklistValue` | `FieldName { value displayValue }` |
225
- | `CurrencyValue` | `FieldName { value displayValue }` |
226
-
227
- ## Agent Workflow for Building Queries
228
-
229
- **Pre-requisites (MANDATORY):**
230
-
231
- - [ ] Verified `schema.graphql` exists in project root
232
- - [ ] If missing, ran `npm run graphql:schema` and waited for completion
233
- - [ ] Confirmed connection to correct Salesforce org (if downloading fresh schema)
234
-
235
- **Workflow Steps:**
236
-
237
- 1. **Identify the target object** (e.g., Account, Contact, Opportunity)
238
- 2. **Search the schema** for the object type to discover available fields
239
- 3. **Search for filter input** (`<Object>_Filter`) to understand filtering options
240
- 4. **Search for orderBy input** (`<Object>_OrderBy`) for sorting capabilities
241
- 5. **Build the query** following the patterns above
242
- 6. **Validate field names** match exactly as defined in the schema (case-sensitive)
243
-
244
- ## Tips for Agents
245
-
246
- - **Always verify field names** by searching the schema before generating queries
247
- - **Use grep/search** to explore the schema efficiently—never read the entire file
248
- - **Check relationships** by looking for `parentRelationship` and `childRelationship` comments in type definitions
249
- - **Look for Connection types** (e.g., `AccountConnection`) to understand pagination structure
250
- - **Custom objects** end with `__c` (e.g., `CustomObject__c`)
251
- - **Custom fields** also end with `__c` (e.g., `Custom_Field__c`)
252
-
253
- ## Related Documentation
254
-
255
- - For generating mutations and queries, see `generate-mutation-query.md`
256
- - For generating read queries, see `generate-read-query.md`
@@ -1,202 +0,0 @@
1
- # GraphQL Read Query Generation
2
-
3
- **Triggering conditions**
4
-
5
- 1. Only if the schema exploration phase completed successfully
6
- 2. Only if the query to generate is a read query
7
-
8
- ## Your Role
9
-
10
- You are a GraphQL expert and your role is to help generate Salesforce compatible GraphQL read queries once the exploration phase has completed.
11
-
12
- You will leverage the context provided by the requesting user as well as the validation phase provided by the schema exploration. This tool will also provide you with a method to dynamically query the target org instance that you will use to test the generated query.
13
-
14
- If the schema exploration has not been executed yet, you **MUST** run it first, and then get back to read query generation.
15
-
16
- ## Read Query Generation Workflow
17
-
18
- Strictly follow the rules below when generating the GraphQL read query:
19
-
20
- 1. **No Proliferation** - Only generate for the explicitly requested fields, nothing else
21
- 2. **Unique Query** - Leverage child relationships to query entities in one single query
22
- 3. **Navigate Entities** - Always use `relationshipName` to access reference fields and child entities
23
- 1. **Exception** - if the `relationshipName` field is null, you can't navigate the related entity, and will have to return the `Id` itself
24
- 4. **Leverage Fragments** - Generate one fragment per possible type on polymorphic fields (field with `dataType="REFERENCE"` and more than one entry in `referenceToInfos` introspection attribute)
25
- 5. **Type Consistency** - Make sure variables used as query arguments and their related fields share the same GraphQL type
26
- 6. **Type Enforcement** - Make sure to leverage field type information from introspection and GraphQL schema to generate field access
27
- 7. **Semi and anti joins** - Use the semi-join or anti-join templates to filter an entity with conditions on child entities
28
- 8. **Query Generation** - Use the [template](#read-query-template) to generate the query
29
- 9. **Output Format** - Use the [standalone](#read-standalone-default-output-format---clean-code-only)
30
- 10. **Test the Query** - Use the [Generated Read Query Testing](#generated-read-query-testing) workflow to test the generated query
31
- 1. **Report First** - Always report first, using the proper output format, before testing
32
-
33
- ## Read Query Template
34
-
35
- ```graphql
36
- query QueryName {
37
- uiapi {
38
- query {
39
- EntityName(
40
- # conditions here
41
- ) {
42
- edges {
43
- node {
44
- # Direct fields
45
- FieldName { value }
46
-
47
- # Non-polymorphic reference (single type)
48
- RelationshipName {
49
- Id
50
- Name { value }
51
- }
52
-
53
- # Polymorphic reference (multiple types)
54
- PolymorphicRelationshipName {
55
- ...TypeAInfo
56
- ...TypeBInfo
57
- }
58
-
59
- # Child relationship (subquery)
60
- RelationshipName(
61
- # conditions here
62
- ) {
63
- edges {
64
- node {
65
- # fields
66
- }
67
- }
68
- }
69
- }
70
- }
71
- }
72
- }
73
- }
74
- }
75
-
76
- fragment TypeAInfo on TypeA {
77
- Id
78
- SpecificFieldA { value }
79
- }
80
-
81
- fragment TypeBInfo on TypeB {
82
- Id
83
- SpecificFieldB { value }
84
- }
85
- ```
86
-
87
- ## Semi-Join and Anti-Join Condition Template
88
-
89
- Semi-joins (resp. anti-joins) condition leverage parent-child relationships and allow filtering the parent entity using a condition on child entities.
90
- This is a standard `where` condition, on the parent entity's `Id`, expressed using the `inq` (resp. `ninq`, i.e. not `inq`) operator. This operator accepts two attributes:
91
-
92
- - The child entity camelcase name to apply the condition on, with a value expressing the condition
93
- - The field name on the child entity containing the parent entity `Id`, which is the `fieldName` from the `childRelationships` information for the child entity
94
- - If the only condition is related child entity existence, you can use an `Id: { ne: null }` condition
95
-
96
- ### Semi-Join Example - ParentEntity with at least one Matching ChildEntity
97
-
98
- ```graphql
99
- query testSemiJoin {
100
- uiapi {
101
- query {
102
- ParentEntity(
103
- where: {
104
- Id: {
105
- inq: {
106
- ChildEntity: {
107
- # standard conditions here
108
- Name: { like: "test%" }
109
- Type: { eq: "some value" }
110
- }
111
- ApiName: "parentIdFieldInChild"
112
- }
113
- }
114
- }
115
- ) {
116
- edges {
117
- node {
118
- Id
119
- Name {
120
- value
121
- }
122
- }
123
- }
124
- }
125
- }
126
- }
127
- }
128
- ```
129
-
130
- ### Anti-Join Example - ParentEntity with no Matching ChildEntity
131
-
132
- Same example as the [Semi-Join Example](#semi-join-example---parententity-with-at-least-one-matching-childentity), but replacing the `inq` operator by the `ninq` one.
133
-
134
- ## Read Standalone (Default) Output Format - CLEAN CODE ONLY
135
-
136
- ```javascript
137
- const QUERY_NAME = `
138
- query GetData {
139
- // query here
140
- }
141
- `;
142
-
143
- const QUERY_VARIABLES = {
144
- // variables here
145
- };
146
- ```
147
-
148
- **❌ DO NOT INCLUDE:**
149
-
150
- - Explanatory comments about the query
151
- - Field descriptions
152
- - Additional text about what the query does
153
- - Workflow step descriptions
154
-
155
- **✅ ONLY INCLUDE:**
156
-
157
- - Raw query string
158
- - Variables object
159
- - Nothing else
160
-
161
- ## Generated Read Query Testing
162
-
163
- **Triggering conditions** - **ALL CONDITIONS MUST VALIDATE\***
164
-
165
- 1. Only if the [Read Query Generation Workflow](#read-query-generation-workflow) step global status is `SUCCESS` and you have a generated query
166
- 2. Only if the query to generate is a read query
167
- 3. Only if non manual method was used during schema exploration to retrieve introspection data
168
-
169
- **Workflow**
170
-
171
- 1. **Report Step** - Explain that you are able to test the query using `sf api request rest`
172
- 2. **Interactive Step** - Ask the user whether they want you to test the query
173
- 1. **WAIT** for the user's answer.
174
- 3. **Test Query** - If the user are OK with you testing the query:
175
- 1. Use `sf api request rest` to POST the query to the GraphQL endpoint:
176
- ```bash
177
- sf api request rest /services/data/v65.0/graphql \
178
- --method POST \
179
- --body '{"query":"query GetData { uiapi { query { EntityName { edges { node { Id } } } } } }"}'
180
- ```
181
- 2. Replace `v65.0` with the API version of the target org
182
- 3. Replace the `query` value with the generated read query string
183
- 4. If the query uses variables, include them in the JSON body as a `variables` key
184
- 5. Report the result of the test as `SUCCESS` if the query executed without error, or `FAILED` if you got errors
185
- 6. If the query executed without any errors, but you received no data, then the query is valid, and the result of the test is `SUCCESS`
186
- 4. **Remediation Step** - If status is `FAILED`, use the [`FAILED` status handling workflows](#failed-status-handling-workflow)
187
-
188
- ### `FAILED` Status Handling Workflow
189
-
190
- The query is invalid:
191
-
192
- 1. **Error Analysis** - Parse and categorize the specific error messages
193
- 2. **Root Cause Identification** - Use error message to identify the root cause:
194
- - **Syntax** - Error contains `invalid syntax`
195
- - **Validation** - Error contains `validation error`
196
- - **Type** - Error contains `VariableTypeMismatch` or `UnknownType`
197
- 3. **Targeted Resolution** - Depending on the root cause categorization
198
- - **Syntax** - Update the query using the error message information to fix the syntax errors
199
- - **Validation** - This field's name is most probably invalid, ask user for clarification and **WAIT** for the user's answer
200
- - **Type** - Use the error details and GraphQL schema to correct argument's type, and adjust variables accordingly
201
- 4. **Test Again** - Resume the [query testing workflow](#generated-read-query-testing) with the updated query (increment and track attempt counter)
202
- 5. **Escalation Path** - If targeted resolution fails after 2 attempts, ask for additional details and restart the entire GraphQL workflow, going again through the introspection phase