create-react-component
Use when: creating a new Relay-connected React component, defining a GraphQL fragment, or wiring a component to a query
Datos de origen
- Repositorio
- OpenCTI-Platform/opencti
- Última actividad en el origen
- 12 de mayo de 2026 a las 12:56
- Idioma detectado de SKILL.md
- inglés
- Estrellas
- 10.152
- Forks
- 1480
Opciones de instalación
De forma predeterminada está seleccionado el prompt que primero revisa el origen. Puedes cambiar a un comando directo o descargar una copia local.
Revisa los archivos de origen
Lee SKILL.md y los archivos complementarios que muestra SkillsMP antes de decidir si quieres instalarlo.
Mostrando SKILL.md
SKILL.md
Instrucciones de origen · Vista previa de solo lectura- name
- create-react-component
- description
- Use when: creating a new Relay-connected React component, defining a GraphQL fragment, or wiring a component to a query
# Create React Component (Relay)
## Prerequisites
- **Parent Component**: Knowing where this will be used.
- **Fragment**: The data requirements from GraphQL.
## Procedure
### Step 0 — Find an Existing Example
Use the **Codebase Pattern Finder** agent to locate a similar existing component in `opencti-platform/opencti-front/src/private/components/` that uses `useFragment`. Model the new component after the existing one to stay idiomatic.
### Step 1 — Create Component File
Location: `opencti-platform/opencti-front/src/private/components/...`.
### Step 2 — Define Fragment & Props
Use `graphql` tag and `useFragment`.
```tsx
import React from 'react';
import { graphql, useFragment } from 'react-relay';
import { MyComponent_data$key } from './__generated__/MyComponent_data.graphql';
const myComponentFragment = graphql`
fragment MyComponent_data on EntityType {
id
name
description
}
`;
interface MyComponentProps {
data: MyComponent_data$key;
}
const MyComponent: React.FC<MyComponentProps> = ({ data }) => {
const node = useFragment(myComponentFragment, data);
return (
<div>
<h1>{node.name}</h1>
<p>{node.description}</p>
</div>
);
};
export default MyComponent;
```
### Step 3 — Run Relay Compiler
Run `yarn relay` to generate the TypeScript types.
Ver en GitHub