create-react-component
Use when: creating a new Relay-connected React component, defining a GraphQL fragment, or wiring a component to a query
Informações da origem
- Repositório
- OpenCTI-Platform/opencti
- Última atividade na origem
- 12 de maio de 2026 às 12:56
- Idioma detectado do SKILL.md
- inglês
- Estrelas
- 10.123
- Forks
- 1.478
Opções de instalação
Por padrão, está selecionado o prompt que primeiro revisa a origem. Você pode mudar para um comando direto ou baixar uma cópia local.
Revise os arquivos de origem
Leia o SKILL.md e os arquivos complementares exibidos pelo SkillsMP antes de decidir se vai instalar.
Exibindo SKILL.md
SKILL.md
Instruções da origem · Visualização somente leitura- 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 no GitHub