SolidJS•14mo ago

suspense + store

if I have a form tied to a store that gets populated async, how do i use this with <suspense so i don't need loading state management

22 Replies

mdynnl•14mo ago

resource + store storage https://github.com/solidjs/solid/releases/tag/v1.5.0

thetarnav•14mo ago

the deep signal was added to solid-primitives too: https://primitives.solidjs.community/package/resource#createdeepsignal

Solid Primitives

A library of high-quality primitives that extend SolidJS reactivity

Braveheart•14mo ago

any simple example for this? is this correct?

Braveheart•14mo ago

import { createResource, createStore } from "solid-js";

const caseStore = createStore({});

function MyComponent() {
  const [caseId, setCaseId] = createSignal(0);
  const [caseResource] = createResource(() =>
    fetch(`/api/cases/${caseId()}`).then((res) => res.json())
  );

  const caseData = caseStore[caseId()] || caseResource();

  // Use caseData in your component logic
  // ...

  return (
    <div>
      <h1>Case {caseId()}</h1>
      <button onClick={() => setCaseId(caseId() + 1)}>Next Case</button>
      {/* ... */}
    </div>
  );
}

import { createResource, createStore } from "solid-js";

const caseStore = createStore({});

function MyComponent() {
  const [caseId, setCaseId] = createSignal(0);
  const [caseResource] = createResource(() =>
    fetch(`/api/cases/${caseId()}`).then((res) => res.json())
  );

  const caseData = caseStore[caseId()] || caseResource();

  // Use caseData in your component logic
  // ...

  return (
    <div>
      <h1>Case {caseId()}</h1>
      <button onClick={() => setCaseId(caseId() + 1)}>Next Case</button>
      {/* ... */}
    </div>
  );
}

mdynnl•14mo ago

👆

Braveheart•14mo ago

i just want the simplest example possible, can't find exact what I want in the tutorial

Braveheart•13mo ago

this works, but its just a signal that returns I think, so i just need to update companyDetailsResource with the deep properties in the form before I used resource and <suspend> i had loading management and

                          onChange={(e) => setCompanyDetailsStore('country', e.currentTarget.value)}>

mdynnl•13mo ago

this release introduced storage option in createResource, also has an example integrating createStore => createDeepSignal + storage which makes res() => store, { mutate } => setStore (with reconcile) and thetarnav added that createDeepSignal (i guess) to solid primitives so you can just grab it from there, which also has a simple example integrating the two but yeah, it could be improved with more usage example i guess

Braveheart•13mo ago

thx, so the primative is sugar? createDeepSignal is from solid.js?

mdynnl•13mo ago

a helper for your convenience crafted by a magician 🪄 nah, the release link includes the implementation .

Braveheart•13mo ago

my devs gonna be confused no end lol

mdynnl•13mo ago

which is probably the same as the solid primitive one

Braveheart•13mo ago

cool

Braveheart•13mo ago

How do I update a store in this way? is there a setter?

thetarnav•13mo ago

[data, { mutate }] mutate is pretty much a signal setter but since it's a "deep signal" it will reconcile on every set there is probably a way to expose the path syntax and produce too but the typescript part is tricky haven't looked into that yet

Braveheart•13mo ago

Braveheart•13mo ago

getting this error

  //create resource for the data
  const [companyDetailsResource, { mutate }] = createResource(
    () => {
      return getCompanyCaseDetails(caseId);
    },
    {
      storage: createDeepSignal,
    }
  );

  //create resource for the data
  const [companyDetailsResource, { mutate }] = createResource(
    () => {
      return getCompanyCaseDetails(caseId);
    },
    {
      storage: createDeepSignal,
    }
  );

will I guess I can set the data in a new clone of the resource, since the gql data response should not change

Braveheart•13mo ago

why can't we type the resource

thetarnav•13mo ago

as I said it's more like signal setter then store setter if you see the source code for the deep signal youll see what's getting returned as a setter

Braveheart•13mo ago

ok ah the type comes from the fetcher what ill do is clone the resource result and tie that to the form and mutate that hmmm, donno then i lose the suspense feature i guess i will make the intital value for the form inputs equal to there resource and the cloned store used in the mutations nah that aint gonna work, cause the value=

                          value={companyDetailsResource()?.companyDetails.registeredAddress.country}

im back to where i started lol two simple stores without <suspense just seems easier to manage for me and my devs at least i know how to use a read only resource tho, thx i dont see function createDeepSignal<T>(value: T): Signal<T> { anywhere in source tho in either repo

thetarnav•13mo ago

you could play with this too if you don't need to reconcile, but just use the resource as an initial state 🤷‍♂️

const [resource] = createResource(() => {...})

const store = createMemo(() => createStore(resource() ?? {}))

<Suspense>
  <Show when={resource()}>
    <App state={store()[0]} setState={store()[1]} />
  </Show>
</Suspense>

const [resource] = createResource(() => {...})

const store = createMemo(() => createStore(resource() ?? {}))

<Suspense>
  <Show when={resource()}>
    <App state={store()[0]} setState={store()[1]} />
  </Show>
</Suspense>

it's just createStore + reconcile https://github.com/solidjs-community/solid-primitives/blob/main/packages/resource/src/index.ts#L256

Braveheart•13mo ago

i dont want to scrare off the react devs too many layers of complexity here vs two stores ill wrap the whole form in a <show with initial store> and just have the 2nd store as the original comparison I've decided to do this:

  onMount(async () => {
    originalData = await getCompanyCaseDetails(caseId);
    setCompanyDetailsStore(originalData);
    debugger
  });

  //clone originalData into a store which will be used for editing and comparing changes to the data in the resource and saving
  const [companyDetailsStore, setCompanyDetailsStore] = createStore(undefined);
  return (
    <>
      <Show when={companyDetailsStore !== undefined}>

  onMount(async () => {
    originalData = await getCompanyCaseDetails(caseId);
    setCompanyDetailsStore(originalData);
    debugger
  });

  //clone originalData into a store which will be used for editing and comparing changes to the data in the resource and saving
  const [companyDetailsStore, setCompanyDetailsStore] = createStore(undefined);
  return (
    <>
      <Show when={companyDetailsStore !== undefined}>

but calling companyDetailsStore throws error caught ReferenceError: companyDetailsStore is not defined what should that <show statement be like?

Gaming

Programming

suspense + store