#Union from data?

8 messages · Page 1 of 1 (latest)

urban crypt
#

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?

gaunt zincBOT
#

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!

eternal iron
#

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.

urban crypt
#

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

eternal iron
urban crypt
#

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

eternal iron
# 
  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