export const Route = createFileRoute('/orders/search')({
component: OrderSearchRoute,
wrapInSuspense: true,
validateSearch: orderSearchFiltersSchema,
beforeLoad: async ({ context, location, search: filters }) => {
return {
optionsQueryOptions: queryOptions({
queryKey: ['order-search-options'],
queryFn: () => getOrderSearchOptions(),
}),
ordersQueryOptions: queryOptions({
queryKey: ['order-search', filters],
queryFn: () => getOrderSearchResults(filters),
placeholderData: keepPreviousData,
}),
};
},
loader: ({ context: { queryClient, ordersQueryOptions, optionsQueryOptions } }) => {
// Should these be await'ed?
void queryClient.prefetchQuery(ordersQueryOptions);
void queryClient.prefetchQuery(optionsQueryOptions);
},
});
function OrderSearchRoute() {
const filters = Route.useSearch();
const { ordersQueryOptions, optionsQueryOptions } = Route.useRouteContext();
const { data: options } = useSuspenseQuery(optionsQueryOptions);
const { data: orders, isLoading } = useQuery(ordersQueryOptions);
return (
<div>
<OrderSearchFilters filters={filters} options={options} />
<OrderSearchResults orders={orders} loading={isLoading} />
</div>
);
}
export const Route = createFileRoute('/orders/search')({
component: OrderSearchRoute,
wrapInSuspense: true,
validateSearch: orderSearchFiltersSchema,
beforeLoad: async ({ context, location, search: filters }) => {
return {
optionsQueryOptions: queryOptions({
queryKey: ['order-search-options'],
queryFn: () => getOrderSearchOptions(),
}),
ordersQueryOptions: queryOptions({
queryKey: ['order-search', filters],
queryFn: () => getOrderSearchResults(filters),
placeholderData: keepPreviousData,
}),
};
},
loader: ({ context: { queryClient, ordersQueryOptions, optionsQueryOptions } }) => {
// Should these be await'ed?
void queryClient.prefetchQuery(ordersQueryOptions);
void queryClient.prefetchQuery(optionsQueryOptions);
},
});
function OrderSearchRoute() {
const filters = Route.useSearch();
const { ordersQueryOptions, optionsQueryOptions } = Route.useRouteContext();
const { data: options } = useSuspenseQuery(optionsQueryOptions);
const { data: orders, isLoading } = useQuery(ordersQueryOptions);
return (
<div>
<OrderSearchFilters filters={filters} options={options} />
<OrderSearchResults orders={orders} loading={isLoading} />
</div>
);
}