Collection Component

The Collection component is a built-in CWA resource that acts as a configurable proxy to any other resource's collection endpoint. An admin creates a Collection, points it at a resource IRI, sets page size and default query parameters, and the front-end renders the results — with pagination, filtering, and real-time updates.

Enabling

Enabled by default. To disable:

silverback_api_components:
    enabled_components:
        collection: false

Creating a Collection

POST /component/collections:

{
    "resourceIri": "/page_data/blog_articles",
    "perPage": 6,
    "defaultQueryParameters": {
        "order[createdAt]": "desc"
    }
}

The Response

The collection property in the response is a full Hydra collection:

{
    "@id": "/component/collections/018e-...",
    "@type": "Collection",
    "resourceIri": "/page_data/blog_articles",
    "perPage": 6,
    "defaultQueryParameters": { "order[createdAt]": "desc" },
    "collection": {
        "@context": "/contexts/BlogArticle",
        "@id": "/page_data/blog_articles?order[createdAt]=desc",
        "@type": "hydra:Collection",
        "hydra:member": [ /* resource objects */ ],
        "hydra:totalItems": 24,
        "hydra:view": {
            "hydra:first": "/page_data/blog_articles?page=1",
            "hydra:last": "/page_data/blog_articles?page=4",
            "hydra:next": "/page_data/blog_articles?page=2"
        }
    }
}

The collection field is read-only (#[ApiProperty(writable: false)]). The bundle populates it by proxying the request to resourceIri with defaultQueryParameters merged in.

Using in a Fixture

From AppScaffold.php in the playground — creating a blog listing collection and linking it to a component group:

$collection = new Collection();
$collection->setResourceIri(
    $this->iriConverter->getIriFromResource(
        BlogArticleData::class,
        UrlGeneratorInterface::ABS_PATH,
        new Get(uriVariables: [])
    )
);
$collection->setPerPage(12);
$collection->setDefaultQueryParameters(['order[createdAt]' => 'desc']);

$cwa->component($collection)
    ->group('content');

perPage vs API Platform Pagination

perPage is a fixed server-side limit. If you want users to change the page size on the fly, enable client_items_per_page in API Platform on the proxied resource and use defaultQueryParameters to set the default. The perPage field alone is for non-user-configurable, fixed-size lists.

On the Front-End

Use useCwaCollectionResource in the Vue component. It unwraps collection.hydra:member, exposes totalPages, and provides goToNextPage / goToPreviousPage helpers — see Collections & Pagination for the full reference.

Admin: Setting Up a Collection in the CMS

1. Add the Collection component to a component group via the admin panel
2. The manager tab lets you search and select the resourceIri
3. Set perPage and defaultQueryParameters as needed
4. The collection renders immediately — no deploy required