Using the Remix loader on server and client
Allrighty, now that I got the Cloudflare D1 database setup, it's time to dig into one of the features of Remix that drew me in—the loader.
The Niuite page started as a simple listing of all the available shirts with a default sort of created date descending. Now I'm adding a select component to the page so you can select the order you would like to see the shirts.
Check the request for a "sort_by" parameterCreate a an object to be used as the sort order for the workers-qb requestPass the sortBy value to be used when rendering the page
export const loader = async ({ context, request }: LoaderFunctionArgs) => { let sortBy = new URL(request.url).searchParams.get('sort_by'); let sortOrder: string | Record<string, string> | string[] | undefined = { 'createdDate': OrderTypes.DESC }; if (sortBy) { switch (sortBy) { case 'name-ascending': sortOrder = { 'name': OrderTypes.ASC } break; case 'name-descending': sortOrder = { 'name': OrderTypes.DESC } break; case 'date-ascending': sortOrder = { 'createdDate': OrderTypes.ASC } break; } } else { sortBy = 'date-descending'; } const { env } = context.cloudflare; const qb = new D1QB(env.DB); const query = await qb .fetchAll<Shirt>({ tableName: 'shirts', orderBy: sortOrder }) .execute(); const shirts = query.results; return json({ shirts, sortBy }); };
Adding a Form and select componentUsing the sortBy value as the defaultValue of the selectHooking up useSubmit so the Form action fires when the selected value changes.
