J Posts - Answer Overflow

Explore posts from servers

•Created by J on 8/11/2024 in #support

Mutate a Resource after fetch efficiently when using <For>

Here's some "pseudo"code:

const [files, { refetch, mutate }]: Resource<File[] | undefined> = createResource(async () =>
   await retrieveFiles(/* some path */)
);

// ...

async function onFileCreated(path: string) {
    mutate([
        ...files,
        ...(await getFileMetadata(path)),
    ]);
}

// In a component:
<For each={files()!}>
   // Omitted
</For>

const [files, { refetch, mutate }]: Resource<File[] | undefined> = createResource(async () =>
   await retrieveFiles(/* some path */)
);

// ...

async function onFileCreated(path: string) {
    mutate([
        ...files,
        ...(await getFileMetadata(path)),
    ]);
}

// In a component:
<For each={files()!}>
   // Omitted
</For>

Now this works, however, anytime a file is created and mutate is called, For does not do any diffing and just goes through the arduous process of re-initializing every single DOM element it had already rendered. I have messed around with using this setup based off this Reddit thread from 2 years:

import { createDeepSignal } from "@solid-primitives/resource";

const [files, { refetch, mutate }] = createResource(async () =>
   await retrieveFiles(/* some path */),
   {
       storage: createDeepSignal
   }
);

import { createDeepSignal } from "@solid-primitives/resource";

const [files, { refetch, mutate }] = createResource(async () =>
   await retrieveFiles(/* some path */),
   {
       storage: createDeepSignal
   }
);

but to no avail. Whenever I call mutate my entire list which was rendered by <For> simply disappears. I honestly do not really understand what in the world createDeepSignal is supposed to do. The API seems extremely archaic. TLDR: I need a reactive resource that I can update with mutate, but that still has SolidJS's <For> diffing so the entire list isn't re-rendered when just one new item is added to the array. Also on a side note, can I pass multiple signals as a source to createResource? Based off the typedef (

export type ResourceSource<S> = S | false | null | undefined | (() => S | false | null | undefined);

export type ResourceSource<S> = S | false | null | undefined | (() => S | false | null | undefined);

) it would seem not, but that seems like a major oversight to me, is there seriously no way to pass an array of Accessors or something like that??

18 replies

SSolidJS

•Created by J on 7/21/2024 in #support

Creating a store with data returned from an async function

Simplifying greatly, this is what I would like to achieve:

const [tab, setTab] = createStore({
    path: await homeDir(),
    view: await userPreferences.get("preferredView")
});

const [tab, setTab] = createStore({
    path: await homeDir(),
    view: await userPreferences.get("preferredView")
});

I understand there is no way to get the return result of an async function in top-level code (this is within a .ts file). Now I know some of you might suggest resources, however, I only need to use these async functions at app launch (aka once and never again), and they are all extremely fast (<10ms) so I do not need to use Suspense or add a loading indicator to my GUI. The only solution I can think of at the moment is initializing properties like path and view with "dummy" values and then within an async-friendly initialization point such as onMount, populating said properties with their real values fetched from the async functions. Using dummy values is a really crappy solution in my opinion so I would be so grateful if somebody had a neat solution to this issue. Coming from lower-level languages like Rust, the lack of control over synchronization drives me insane in these frontend frameworks. Thanks.

131 replies

SSolidJS

•Created by J on 7/20/2024 in #support

Question Relating to Arrays

Hey, I have been working with Svelte for the past couple months and I am thinking about rewriting one of my projects in Solid. One of the biggest things that plighted me with Svelte was the lack of support for nested reactivity. I understand that Solid supports nested reactivity via stores, but in my project I am working with arrays all the time, especially reordering elements in arrays. Now my question, how, for example, would I reorder elements in an array based off a user provided index? After looking through the docs I have only seen examples of prepending and appending of arrays, and even those examples are slightly confusing. A simple and idiomatic code example with an explanation would be extremely helpful. Thanks in advance and I apologize if this question has already been answered somewhere.

22 replies

Gaming

Programming