How would you implement this requirement?
The component will be a list of N items that can be added by the user. Each new item has it's own fetcher so that the item will be up to date with its fetcher's status.
#N Fetchers
plush rune
sinful girder
make each item a component
inside the component call useFetcher
then in the parent call useFetchers to get the list of fetcher
if you have fetchers somewhere else you can add a key
like useFetcher({ key })
then you can set the key to be prefixed like
let key = `prefix:${props.id}`
let fetcher = useFetcher({ key })
then in the list filter them
let fetchers = useFetchers().filter(fetcher => fetcher.key.startsWith("prefix"))
Thanks @sinful girder !
I'll add one more requirement.
For the display of each item, I want to use a component library <Table /> component that accepts a dataSource that is an array of objects. (this way I can sort the results, filter, etc, using the library).
Is it possible to somehow have N fetchers and update the dataSource array with the results/status of each fetcher so I can use it with a component library?
This would be in contrast to manually rendering each item as a separate component.
Maybe I could still render an individual list of items but hide them on the UI and grab their fetcher ids for use in the dataSource array in the parent component.
sinful girder
you can as long as you render them on each component
this is not a limit of Remix
it's just how hooks works
you can't do
let fetchers = items.map(item => useFetcher({ key: `prefix:${item.id}` }))
while it's correct JS code it's not valid in React
the only way is that you render a component per item
and inside the component you call useFetcher
fickle shuttle
I’ll note that some ui libraries frustratingly force you to use their row and cell components. Even wrappers around their components will throw errors when rendered
That’s bad API design, IMO
kind crater
I like to only use fetcher keys for concurrency swimlanes and use the submission data instead to identify them, usually an intent key
https://www.jacobparis.com/content/conform-json-formdata#parse-json-and-formdata-fetchers
you can map your table rows to add any data from the fetchers
I'm using this with the submission data for optimistic UI here (adding all pending creates, edits, and deletes to the dataset) but you could just as well access the response data
the schema then can be as simple as z.object({ intent: z.literal('item-one') }) to match all submissions with any key that used that intent, anywhere in the app
plush rune
Thanks, @kind crater ! Is there any technical reason I'd want to filter the fetchers by the submission data rather than assigning a unique key?
Since I'm making my unique key from the submission data itself, in my case it is redundant to use a key, I can just filter by the submission data. Wondering if there are any other reasons that's a good idea.
