Tutorial 6: Relations & Linked Data

Add the M2O Relation: Tasks → Projects

Ask your AI assistant to add the relation:

/create-collection add M2O relation from tasks to projects on field project_id

The skill uses MCP to register project_id as an M2O field in DaaS automatically, and also generates a local SQL migration file.

After this, both DaaS (already updated via MCP) and your local Postgres have the FK column — enabling deep filtering, eager loading, and automatic interface detection on the form.

Verify the M2O Component Is Installed

The project-starter ships with select-dropdown-m2o pre-installed. Confirm it appears in buildpad.json under installedComponents. If it isn’t there (e.g. in a custom setup), install it:

npx @buildpad/cli@latest add select-dropdown-m2o

See the Project Selector on the Task Form

No code change required. CollectionForm reads field metadata from DaaS, sees that project_id is an M2O relation, and renders select-dropdown-m2o automatically. Open any task at /content/tasks/<id> and the new “Project” dropdown will be there.

For reference, the existing detail page in the starter looks like this — note there is no fieldOverrides prop:

"use client";
 
import { use } from "react";
import { useRouter } from "next/navigation";
import { Button, Group } from "@mantine/core";
import { CollectionForm, WorkflowButton } from "@/components/ui";
import { isNewItem } from "@/lib/utils";
 
export default function TaskDetailPage({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = use(params);
  const router = useRouter();
 
  return (
    <div>
      <Group mb="md" justify="space-between">
        <Button onClick={() => router.push("/content/tasks")}>Tasks</Button>
        {!isNewItem(id) && <WorkflowButton collection="tasks" itemId={id} />}
      </Group>
 
      <CollectionForm
        collection="tasks"
        id={isNewItem(id) ? undefined : id}
        mode={isNewItem(id) ? "create" : "edit"}
        onSuccess={(data) => {
          if (isNewItem(id) && data?.id) {
            router.push(`/content/tasks/${data.id}`);
          }
        }}
      />
    </div>
  );
}

Create the Tags Collection and M2M Relation

/create-collection tags with fields: name (input, required), color (color)
/create-collection add M2M relation between tasks and tags via tasks_tags junction

The skill registers both collections and the junction in DaaS via MCP, and generates local migrations.

Verify the M2M Component Is Installed

list-m2m ships pre-installed in the project-starter. If missing, install it:

npx @buildpad/cli@latest add list-m2m

See the Tags Editor on the Task Form

Again, no code change required. DaaS exposes tags as an M2M relation (with junction tasks_tags), and CollectionForm renders list-m2m automatically. Reopen the task detail page — the tags editor appears alongside the project dropdown.

Seed Tags and Verify

The tags picker will be empty until you create some tags. Seed a few via the DaaS API:

TOKEN="<your-token>"
BASE="https://<your-project>.daas.buildpad.ai/api/items/tags"
 
curl -s -X POST $BASE \
  -H "Authorization: Bearer $TOKEN" \
  -H "Content-Type: application/json" \
  -d '{"name":"frontend","color":"#4C6EF5"}'
 
curl -s -X POST $BASE \
  -H "Authorization: Bearer $TOKEN" \
  -H "Content-Type: application/json" \
  -d '{"name":"backend","color":"#12B886"}'
 
curl -s -X POST $BASE \
  -H "Authorization: Bearer $TOKEN" \
  -H "Content-Type: application/json" \
  -d '{"name":"urgent","color":"#FA5252"}'

Then verify the full flow:

1. Open a task at /content/tasks/<id>
2. The Tags field should appear as a multi-select picker listing frontend, backend, urgent
3. Select two tags and save
4. Reload the task — the selected tags should still be shown
5. Go back to the tasks list — if you’ve added the tags.tag_id.name field (next step), tag names appear inline in the table

Filter Tasks by Project

Update the tasks list page to filter by a selected project. DaaS supports deep filtering using dot notation:

// Pass a static filter (e.g. from a URL query param)
<CollectionList
  collection="tasks"
  fields={["title", "status", "priority", "due_date", "project_id.name"]}
  filter={{ project_id: { _eq: selectedProjectId } }}
  enableSearch
  enableFilter
/>

# Filter tasks by project — and include the project name in the response
curl -G \
  -H "Authorization: Bearer <your-token>" \
  --data-urlencode 'filter[project_id][_eq]=<project-id>' \
  --data-urlencode 'fields=*,project_id.name' \
  https://<your-project>.daas.buildpad.ai/api/items/tasks

Show the Project Name in the Task List

Use the fields deep-load syntax to include the project name in the list:

<CollectionList
  collection="tasks"
  fields={["title", "status", "priority", "due_date", "project_id.name", "tags.tag_id.name"]}
  enableSearch
  enableFilter
/>

project_id.name resolves the M2O relation and displays the project’s name inline. For M2M, traverse the junction (tags.tag_id.name) to pull a related field.