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で見る