SolidJS•8mo ago

Possible to map of `useSubmissions` result?

I was just playing with solid-router, and was curious if there was a way to map over the results of useSubmissions outside of a rendered <For> component. In the linked code: https://github.com/JacobSNGoodwin/scavenge-solid/blob/main/src/components/HuntItemsList.tsx#L43, I was trying to basically create a list of items where I optimistically filtered out any items being deleted and optimistically added any being added, while also sorting them. I was able to get the ids of submissions being deleted in a good old fashioned for loop, but we cannot map over the Proxied array (which may be fine and desirable). So this had me wondering if anyone has opinions on the best way to handle this sort of situation. I'm probably coming from the react world and not doing this right.

GitHub

scavenge-solid/src/components/HuntItemsList.tsx at main · JacobSNGo...

A playground for managing scavenger hunts build with solid-start > 0.4 - JacobSNGoodwin/scavenge-solid

3 Replies

peerreynders•8mo ago

If pressed you can always use the $TRACK symbol (exported by solid-js) to gain access to the core array (with reactivity only to the array as a whole):

const raw = (s: SetCountSubmissionMany) => {
  if($TRACK in s) {
    return s[$TRACK] as SetCountSubmissionMany;
  }
  throw new Error('Not a solid.js Proxy')
}

const raw = (s: SetCountSubmissionMany) => {
  if($TRACK in s) {
    return s[$TRACK] as SetCountSubmissionMany;
  }
  throw new Error('Not a solid.js Proxy')
}

https://stackblitz.com/edit/solidjs-templates-7u2yad?file=src%2Fapp.tsx Though I'm not sure whether that constitutes __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED usage. https://github.com/solidjs/solid-router/blob/bf255e3abe2102ca127a8f53664071c5161878ae/src/data/action.ts#L31

peerreynders

StackBlitz

solid.js action cache interplay - StackBlitz

A Solid TypeScript project based on @solidjs/router, solid-js, typescript, vite and vite-plugin-solid

GitHub

solid-router/src/data/action.ts at bf255e3abe2102ca127a8f53664071c5...

A universal router for Solid inspired by Ember and React Router - solidjs/solid-router

brenelz•8mo ago

You can do something like this I think. [...submissions.values()].map

jacobgoodwinOP•8mo ago

Thanks. It will be useful for me to look into the internals to better understand solid-js. This does work! Thanks. I guess this is a way to access the inner array of the proxy, then. This is one I'll definitely want to catelog in the old noggin'

Gaming

Programming

Possible to map of `useSubmissions` result?