declspecl Posts - Answer Overflow

declspecl

Explore posts from servers

•Created by declspecl on 4/27/2024 in #help

Navigating through multiple many-to-many relationships in a single query?

Hi all! I've been racking my brain unsuccessfuly on how to accomplish my desired behavior with a query using drizzle. I don't even know how to do it in SQL honestly, and I've searched everywhere on the internet but nothing seems to do exactly what I want. This is a stripped version of my schema just showing the relations, as the rest is pretty simple to deduce. The hierarchy is primarily meal combinations -> many food items -> many traits

export const foodItemsRelations = relations(foodItems, ({ many, one }) => ({
    foodItemsTraits: many(foodItemsTraits),
    mealCombinationFoodItems: many(mealCombinationsFoodItems) // may not ever need to query this, can maybe eventually comment out
}));

export const foodItemsTraitsRelations = relations(foodItemsTraits, ({ one }) => ({
    foodItem: one(foodItems, {
        fields: [foodItemsTraits.foodItemId],
        references: [foodItems.id]
    }),
    trait: one(traits, {
        fields: [foodItemsTraits.traitId],
        references: [trait.id]
    }),
}));

export const mealCombinationsRelations = relations(mealCombinations, ({ many}) => ({
    mealCombinationFoodItems: many(mealCombinationsFoodItems)
}));

export const mealCombinationsFoodItemsRelations = relations(mealCombinationsFoodItems, ({ one }) => ({
    mealCombination: one(mealCombinations, {
        fields: [mealCombinationsFoodItems.mealCombinationId],
        references: [mealCombinations.id]
    }),
    foodItem: one(foodItems, {
        fields: [mealCombinationsFoodItems.foodItemId],
        references: [foodItems.id]
    })
}));

export const foodItemsRelations = relations(foodItems, ({ many, one }) => ({
    foodItemsTraits: many(foodItemsTraits),
    mealCombinationFoodItems: many(mealCombinationsFoodItems) // may not ever need to query this, can maybe eventually comment out
}));

export const foodItemsTraitsRelations = relations(foodItemsTraits, ({ one }) => ({
    foodItem: one(foodItems, {
        fields: [foodItemsTraits.foodItemId],
        references: [foodItems.id]
    }),
    trait: one(traits, {
        fields: [foodItemsTraits.traitId],
        references: [trait.id]
    }),
}));

export const mealCombinationsRelations = relations(mealCombinations, ({ many}) => ({
    mealCombinationFoodItems: many(mealCombinationsFoodItems)
}));

export const mealCombinationsFoodItemsRelations = relations(mealCombinationsFoodItems, ({ one }) => ({
    mealCombination: one(mealCombinations, {
        fields: [mealCombinationsFoodItems.mealCombinationId],
        references: [mealCombinations.id]
    }),
    foodItem: one(foodItems, {
        fields: [mealCombinationsFoodItems.foodItemId],
        references: [foodItems.id]
    })
}));

Which is a lot of many to many relationships that I want to navigate in a single query. My goal is pretty much this: "SELECT * FROM mealCombinations WHERE every linked trait from every linked foodItem is in some given list of traits." And every row that does not satisfy that condition is no longer considered.

2 replies

SSolidJS

•Created by declspecl on 1/2/2024 in #support

Using kobalte ui combobox with asynchronous options

Hi all! I'm new to kobalte and solid in general, so I would appreciate some help here! I'm using solid-ui, which uses kobalte for the Combobox component. I noticed, though, that giving the ComboBox.Root component's options field the result of an asynchronous operation (im using createResource) somewhat breaks the component visually. Here's a snippet of my code to show you what I mean:

export const NetworkInterfaceSelector: Component<NetworkInterfaceSelectorProps> = (props) => {
    const [networkInterfaces] = createResource(get_network_interfaces, { initialValue: [] });
    const [targetNetworkInterface, setTargetNetworkInterface] = createSignal<NetworkInterface | undefined>(undefined);

    return (
        <Combobox<NetworkInterface>
            placeholder="Select a network interface"
            options={networkInterfaces()}
            class={props.class}
            onInputChange={(value) => {if (value === "") setTargetNetworkInterface(undefined)}}
            itemComponent={(props) => (
                <ComboboxItem item={props.item}>
                    <ComboboxItemLabel>{props.item.rawValue.description}</ComboboxItemLabel>
                    <ComboboxItemIndicator />
                </ComboboxItem>
            )}
        >
        ...

export const NetworkInterfaceSelector: Component<NetworkInterfaceSelectorProps> = (props) => {
    const [networkInterfaces] = createResource(get_network_interfaces, { initialValue: [] });
    const [targetNetworkInterface, setTargetNetworkInterface] = createSignal<NetworkInterface | undefined>(undefined);

    return (
        <Combobox<NetworkInterface>
            placeholder="Select a network interface"
            options={networkInterfaces()}
            class={props.class}
            onInputChange={(value) => {if (value === "") setTargetNetworkInterface(undefined)}}
            itemComponent={(props) => (
                <ComboboxItem item={props.item}>
                    <ComboboxItemLabel>{props.item.rawValue.description}</ComboboxItemLabel>
                    <ComboboxItemIndicator />
                </ComboboxItem>
            )}
        >
        ...

The example is ripped pretty much straight from the docs, besides the createResource part. I had to add the initialValue option because otherwise, I would get an error that options can't be set to NetworkInterface[] | undefined and would give me an error about reading .filter from undefined. Anyways, after the options become populated, all of the items are treated as the same, so hovering on one will highlight them all, selecting one will apply the selected icon to all, etc. Also, selecting and typing is broken. So, I was wondering if there is another way to show the combobox with async options. I've tried using Suspense and Show, and they didn't work, but I could be using them wrong. Thanks!

1 replies

SSolidJS

•Created by declspecl on 12/31/2023 in #support

Question about async effects and their underlying reactivity

Hello! I'm learning solid, coming from a react background, and had a question about something mentioned on the docs. One of the considerations listed is that

"This approach only tracks synchronously. If you have a setTimeout or use an async function in your Effect the code that executes async after the fact won't be tracked."

I was wondering why this is the case behind the scenes? Just because its a setTimeout or async function in the effect, it still is calling the primitives that manages all of the reactivity, so why wouldnt the code that runs async follow the same typical reactive behavior / wouldn’t be tracked? Thanks!

1 replies

Gaming

Programming