#Updating Resource value?

14 messages · Page 1 of 1 (latest)

fierce cipher
#

I have a basic search form that when the action is submitted I would like to update the resource with the filtered result. Is there a simple way to do this? Here's my code as an example:

export const useRestaurants = routeLoader$(async () => {
    return await prisma.restaurant.findMany();
});

export const useSearchFormLoader = routeLoader$<InitialValues<SearchForm>>(() => ({
    searchPhrase: "",
}));

export const useSearchFormAction = formAction$<SearchForm>((values) => {
    // I've got the search values here, but I don't know how to use them to update the restaurants list
}, zodForm$(searchSchema));

export default component$(() => {
    return (
        <Main>
            <H1>Discover Northern Ireland's Best Restaurants</H1>
            <P>
                Find the perfect spot for your next meal in Belfast, Derry, or anywhere in between
                with our directory of top-rated restaurants in Northern Ireland. Simply enter your
                address or location to browse our listings and discover everything from cozy local
                favorites to fine dining experiences. Our comprehensive directory makes it easy to
                treat your taste buds to a culinary adventure, with something for every taste and
                budget. Start exploring today!
            </P>
            <SearchForm />
            <DivGrid>
                <Resource
                    value={useRestaurants()}
                    onPending={() => <div>Loading restaurants...</div>}
                    onResolved={(restaurants) => (
                        <>
                            {restaurants &&
                                restaurants.map((restaurant) => (
                                    <RestaurantCard restaurant={restaurant} />
                                ))}
                        </>
                    )}
                />
            </DivGrid>
        </Main>
    );
});
hasty steppe
#

🙌

#

Well, from my understanding, <Resource /> is resolved at the first render. So, update the URL with the search param by submitting the form shall do the job – handle the query param adequately.

#

if you want to update the list of restaurant without having to reload the page; I think Resource if not the best choice

fierce cipher
#

That seems to do a full page reload though 🤔 would be nice if the page didn't fully reload

hasty steppe
#

other choice, is to use server$ ✌️

#

correct

#

you can pass restaurants into another component

#

and make that component react to the search events (request, with action$ or server$, and update a store/signal)

#

if that makes sense to you 🙂

fierce cipher
#

Yeah I think you're right, the more I think about it the less formAction$ makes sense since I don't actually want to submit the form. Shame there's no nice way to use formAction$ and not submit but return some params to be stored.

hasty steppe
#

formAction is pretty nice, like in Remix, it works in the thoughest conditions. With no JS for instance. Its trade-off with the DX and UX makes interesting (for me) in specific cases only

burnt hamlet
fierce cipher