Clever TaglineC
Convex Community•2y ago•
8 replies
Clever Tagline

Union from data?

I'm migrating a detailed planning system from Airtable to Convex, and one of the data points on each task is the task type. In the original Airtable version, each type is assigned a color. When saving the data, though, I only want to save the name of the task type, with the color only being rendered inside the app for visual reference.

Originally I had designed the table schema with the possible options for the task type like this:
taskType: v.union(
  v.literal("Single"),
  v.literal("Recurring"),
  v.literal("Scheduled"),
  v.literal("Sequence"),
  v.literal("Interval")
)

That's working fine. I'm now at the point in the app design where I want to display a color swatch on each task depending on the task type. What I'd like to do is start with something like this so that I only have to define the names and colors in one place:
export const taskTypeData = [
  { label: "Single", color: "var(--mantine-color-blue-7)" },
  { label: "Recurring", color: "var(--mantine-color-red-9)" },
  { label: "Scheduled", color: "var(--mantine-color-green-9)" },
  { label: "Sequence", color: "var(--mantine-color-yellow-9)" },
  { label: "Interval", color: "var(--mantine-color-gray-6)" },
]

...and then use the labels to define the schema. However, my initial attempt:
taskType: v.union(taskTypeData.map(t => v.literal(t.label)))

...led to this error:
Argument of type 'VLiteral<string, "required">[]' is not assignable to parameter of type 'Validator<any, "required", any>'

I'm still fairly new to TypeScript, so I don't yet understand if/how this could be tweaked to do what I want. Is this even possible?
Was this page helpful?