Resource API
O FlowEngine do NocoBase oferece duas classes de Resource para tratar operações de dados no front-end — MultiRecordResource para listas/tabelas (vários registros) e SingleRecordResource para formulários/detalhes (um único registro). Elas encapsulam chamadas REST API e fornecem gerenciamento reativo de dados.
Cadeia de herança: FlowResource → APIResource → BaseRecordResource → MultiRecordResource / SingleRecordResource
MultiRecordResource
Usada em cenários com múltiplos registros, como listas, tabelas e kanban. Importada de @nocobase/flow-engine.
Operações de dados
Paginação
Linhas selecionadas
Exemplo: usando dentro de um CollectionBlockModel
Ao herdar de CollectionBlockModel, é necessário criar a Resource via createResource() e ler os dados em renderComponent():
import React from 'react';
import { BlockSceneEnum, CollectionBlockModel } from '@nocobase/client-v2';
import { MultiRecordResource } from '@nocobase/flow-engine';
import { tExpr } from '../locale';
export class ManyRecordBlockModel extends CollectionBlockModel {
static scene = BlockSceneEnum.many;
// Declara o uso de MultiRecordResource para gerenciar os dados
createResource() {
return this.context.makeResource(MultiRecordResource);
}
get resource() {
return this.context.resource as MultiRecordResource;
}
renderComponent() {
const data = this.resource.getData(); // TDataItem[]
const count = this.resource.getCount(); // total de registros
return (
<div>
<h3>Total de {count} registros (página {this.resource.getPage()})</h3>
<pre>{JSON.stringify(data, null, 2)}</pre>
</div>
);
}
}
ManyRecordBlockModel.define({
label: tExpr('Many records block'),
});
Exemplo completo em FlowEngine → Extensão de Block.
Exemplo: chamando CRUD em um botão de ação
No handler do registerFlow de um ActionModel, obtenha a Resource do Block atual via ctx.blockModel?.resource e chame os métodos CRUD:
import { ActionModel, ActionSceneEnum } from '@nocobase/client-v2';
import { MultiRecordResource } from '@nocobase/flow-engine';
import { tExpr } from '../locale';
export class NewTodoActionModel extends ActionModel {
static scene = ActionSceneEnum.collection;
defaultProps = {
type: 'primary',
children: tExpr('New todo'),
};
}
NewTodoActionModel.define({
label: tExpr('New todo'),
});
NewTodoActionModel.registerFlow({
key: 'newTodoFlow',
title: tExpr('New todo'),
on: 'click',
steps: {
openForm: {
async handler(ctx) {
// Obtém a Resource do Block atual
const resource = ctx.blockModel?.resource as MultiRecordResource;
if (!resource) return;
ctx.viewer.dialog({
title: ctx.t('New todo'),
content: (view) => (
<MyForm
onSubmit={async (values) => {
// Cria o registro; após a criação, a Resource faz refresh automaticamente
await resource.create(values);
ctx.message.success(ctx.t('Created successfully'));
view.close();
}}
onCancel={() => view.close()}
/>
),
});
},
},
},
});
Exemplo completo em Construindo um plugin de gerenciamento de dados full-stack.
Exemplo: referência rápida de operações CRUD
async handler(ctx) {
const resource = ctx.blockModel?.resource as MultiRecordResource;
// --- Criar ---
await resource.create({ title: 'New item', completed: false });
// Sem refresh automático
await resource.create({ title: 'Draft' }, { refresh: false });
// --- Ler ---
const items = resource.getData(); // TDataItem[]
const count = resource.getCount(); // total de registros
const item = await resource.get(1); // obtém um único registro pela chave primária
// --- Atualizar ---
await resource.update(1, { title: 'Updated' });
// --- Excluir ---
await resource.destroy(1); // exclusão individual
await resource.destroy([1, 2, 3]); // exclusão em lote
// --- Paginação ---
resource.setPage(2);
resource.setPageSize(50);
await resource.refresh();
// Ou usando os métodos de atalho
await resource.goto(3);
await resource.next();
await resource.previous();
// --- Atualizar dados ---
await resource.refresh();
}
SingleRecordResource
Usada em cenários com um único registro, como formulários e páginas de detalhe. Importada de @nocobase/flow-engine.
Operações de dados
Propriedades-chave
import React from 'react';
import { BlockSceneEnum, CollectionBlockModel } from '@nocobase/client-v2';
import { SingleRecordResource } from '@nocobase/flow-engine';
import { tExpr } from '../locale';
export class DetailBlockModel extends CollectionBlockModel {
static scene = BlockSceneEnum.one;
createResource() {
return this.context.makeResource(SingleRecordResource);
}
get resource() {
return this.context.resource as SingleRecordResource;
}
renderComponent() {
const data = this.resource.getData(); // objeto único ou null
if (!data) return <div>Carregando...</div>;
return (
<div>
<h3>{data.title}</h3>
<p>{data.content}</p>
</div>
);
}
}
DetailBlockModel.define({
label: tExpr('Detail block'),
});
Exemplo: criar e editar registros
async handler(ctx) {
const resource = ctx.model.context.resource as SingleRecordResource;
// --- Criar registro ---
resource.isNewRecord = true;
await resource.save({ name: 'John', age: 30 });
// save chama internamente o Action create e faz refresh automático ao concluir
// --- Editar registro existente ---
resource.setFilterByTk(1); // define automaticamente isNewRecord = false
await resource.refresh(); // carrega os dados atuais primeiro
const data = resource.getData();
await resource.save({ ...data, name: 'Jane' });
// save chama internamente o Action update
// --- Excluir registro atual ---
await resource.destroy(); // usa o filterByTk definido
}
Métodos comuns
Os métodos a seguir estão disponíveis tanto em MultiRecordResource quanto em SingleRecordResource:
Filtros
Controle de campos
Configuração de Resource
Eventos
resource.on('saved', (data) => {
console.log('Registro salvo:', data);
});
Sintaxe de filter
O NocoBase usa uma sintaxe de filtro em estilo JSON, com operadores começando com $:
// igual
{ status: { $eq: 'active' } }
// diferente
{ status: { $ne: 'deleted' } }
// maior que
{ age: { $gt: 18 } }
// contém (correspondência aproximada)
{ name: { $includes: 'test' } }
// combinação E
{
$and: [
{ status: { $eq: 'active' } },
{ age: { $gt: 18 } },
]
}
// combinação OU
{
$or: [
{ status: { $eq: 'active' } },
{ role: { $eq: 'admin' } },
]
}
Na Resource, recomenda-se usar addFilterGroup para gerenciar as condições de filtro:
// Adiciona vários grupos de filtro
resource.addFilterGroup('status', { status: { $eq: 'active' } });
resource.addFilterGroup('age', { age: { $gt: 18 } });
// getFilter() agrega automaticamente em: { $and: [...] }
// Remove um grupo de filtro
resource.removeFilterGroup('status');
// Atualiza para aplicar os filtros
await resource.refresh();
Comparação entre MultiRecordResource e SingleRecordResource
Links relacionados
