create-creation-form
Use when: scaffolding a creation form drawer with Formik validation and a Relay mutation for a new entity
来源信息
- 仓库
- OpenCTI-Platform/opencti
- 最近来源活动
- 2026年5月12日 12:56
- 检测到的 SKILL.md 语言
- 英语
- 星标
- 10,152
- 分支
- 1,480
安装方式
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
检查来源文件
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
正在显示 SKILL.md
SKILL.md
来源说明 · 只读预览- name
- create-creation-form
- description
- Use when: scaffolding a creation form drawer with Formik validation and a Relay mutation for a new entity
# Create Creation Form (Drawer)
## Prerequisites
- **Mutation**: GraphQL mutation for creating the entity.
- **Fields**: List of fields to display.
## Procedure
### Step 0 — Find an Existing Example
Use the **Codebase Pattern Finder** agent to locate a similar existing creation form in `opencti-platform/opencti-front/src/private/components/` (look for files ending in `Creation.tsx`). Model the new form after the existing one to stay idiomatic.
### Step 1 — Define Mutation & Validation
Use `Yup` for validation schema.
```tsx
const creationMutation = graphql`
mutation MyEntityCreationMutation($input: MyEntityAddInput!) {
myEntityAdd(input: $input) {
...MyEntityLine_node
}
}
`;
const validationSchema = Yup.object().shape({
name: Yup.string().required(t('This field is required')),
});
```
### Step 2 — Create Component Structure
Return a `Drawer` containing a `Formik` form.
```tsx
export const MyEntityCreation: React.FC<Props> = ({ paginationOptions }) => {
const [commit] = useApiMutation(creationMutation);
const onSubmit = (values, { setSubmitting, resetForm }) => {
commit({
variables: {
input: values,
},
updater: (store) => {
// Use utils/store helper
insertNode(store, 'Pagination_myEntities', paginationOptions, 'myEntityAdd');
},
onCompleted: () => {
setSubmitting(false);
resetForm();
},
});
};
return (
<Drawer title={t_i18n('Create entity')}>
<Formik initialValues={{ name: '' }} validationSchema={validationSchema} onSubmit={onSubmit}>
<Form>
<Field component={TextField} name="name" label={t_i18n('Name')} />
<Button type="submit">{t_i18n('Create')}</Button>
</Form>
</Formik>
</Drawer>
);
};
```
在 GitHub 查看