Clever Tagline•6mo ago

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")
)

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)" },
]

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)))

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>'

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?

7 Replies

Convex Bot•6mo ago

Thanks for posting in <#1088161997662724167>. Reminder: If you have a Convex Pro account, use the Convex Dashboard to file support tickets. - Provide context: What are you trying to achieve, what is the end-user interaction, what are you seeing? (full error message, command output, etc.) - Use search.convex.dev to search Docs, Stack, and Discord all at once. - Additionally, you can post your questions in the Convex Community's <#1228095053885476985> channel to receive a response from AI. - Avoid tagging staff unless specifically instructed. Thank you!

jamwt•6mo ago

Hi You are passing a list as a single argument, but v.union takes multiple arguments. You actually want your list items to be the arguments to the function.

Clever TaglineOP•6mo ago

Yeah, I wasn't sure if v.union was flexible enough to accept something iterable and parse it out from there.

jamwt•6mo ago

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax

MDN Web Docs

Spread syntax (...) - JavaScript | MDN

The spread (...) syntax allows an iterable, such as an array or string, to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected. In an object literal, the spread syntax enumerates the properties of an object and adds the key-value pairs to the object being created.

Clever TaglineOP•6mo ago

Doh! I use spread syntax all the time, but I've admittedly never used it to spread arguments to a function

jamwt•6mo ago

function sum(x, y, z) {
  return x + y + z;
}

const numbers = [1, 2, 3];

// Using the spread operator to pass the array elements as arguments
const result = sum(...numbers);

console.log(result); // Output: 6

function sum(x, y, z) {
  return x + y + z;
}

const numbers = [1, 2, 3];

// Using the spread operator to pass the array elements as arguments
const result = sum(...numbers);

console.log(result); // Output: 6

Clever TaglineOP•6mo ago

Beautiful. Thanks!

Union from data?

Did you find this page helpful?