Update resources onSubmit? about modular-forms

[fabian-hiller]

After the action has been executed, your loader will automatically be re-executed as well. The goal must therefore be to get the search parameter into your loader. Maybe that works with a cookie. It's best to ask here on the Qwik Discord. I still don't know enough about Qwik to answer this.

[fabian-hiller]

Can you let me know what your solution is? And if you don't find a solution, I might have some ideas for workarounds.

[jmcelreavey]

Will do, I've had no response yet. I was hoping to do something like this:

export const useRestaurants = (searchPhrase?: string) =>
    routeLoader$(() => async () => {
        return await prisma.restaurant.findMany({
            where: {
                name: {
                    contains: searchPhrase,
                },
            },
        });
    });

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

export const useSearchFormAction = formAction$<SearchForm>((values, { redirect, query }) => {
    redirect(302, "?searchPhrase=" + values.searchPhrase);
}, zodForm$(searchSchema));

export default component$(() => {
    // get the search phrase from the query string
    const query = useLocation().url.searchParams;
    const searchPhrase = query.get("searchPhrase");
    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(searchPhrase ?? undefined)()}
                    onPending={() => <div>Loading restaurants...</div>}
                    onResolved={(restaurants) => (
                        <>
                            {restaurants &&
                                restaurants.map((restaurant) => (
                                    <RestaurantCard restaurant={restaurant} />
                                ))}
                        </>
                    )}
                />
            </DivGrid>
        </Main>
    );
});

But Qwik isn't a fan.. Next option is to just use a server$ function on browser submit after validation. Though that won't actually get the routerLoader$ to update.. Maybe I need to use something else instead of routeLoader$ 🤔

[fabian-hiller]

Optionally, you can also return data via formAction$, which you can then retrieve via searchForm.response.data. However, the originally planned implementation via routeLoader$ would of course be better.

type Restaurant = { … };

export const useFormAction = formAction$<SearchForm, Restaurant[]>((values) => {
  return {
    data: await prisma.restaurant.findMany({ … }),
  };
});

[jmcelreavey]

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

export const useSearchFormAction = formAction$<SearchForm>((values, { redirect, query }) => {
    return redirect(302, "?searchPhrase=" + encodeURIComponent(values.searchPhrase));
}, zodForm$(searchSchema));

export default component$(() => {
    const loc = useLocation();
    const searchPhrase = loc.url.searchParams.get("searchPhrase");
    const restaurantResource = useResource$<Restaurant[]>(async (ctx) => {
        ctx.track(() => searchPhrase);

        return await prisma.restaurant.findMany(
            searchPhrase
                ? {
                      where: {
                          OR: [
                              { name: { contains: searchPhrase } },
                              { location: { contains: searchPhrase } },
                              { postcode: { contains: searchPhrase } },
                          ],
                      },
                  }
                : undefined
        );
    });

    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={restaurantResource}
                    onPending={() => <div>Loading restaurants...</div>}
                    onResolved={(restaurants) => (
                        <>
                            {restaurants &&
                                restaurants.map((restaurant) => (
                                    <RestaurantCard restaurant={restaurant} />
                                ))}
                        </>
                    )}
                />
            </DivGrid>
        </Main>
    );
});

So this is where I've landed so far; problem is the redirect causes a full page reload. I wonder could I access the values returned from the useSeachFormLoader

[fabian-hiller]

So this is where I've landed so far; problem is the redirect causes a full page reload. I wonder could I access the values returned from the useSeachFormLoader

Was that a question for me? If so, I need more details.

[fabian-hiller]

Since it doesn't currently look like Modular Forms can do anything about this "problem", I'm closing the issue. I will reopen it if there are other signs.