SolidJSS
SolidJS•2y ago•
2 replies
ChrisThornham

Help Me Solve "undefined" warning When Using <Show> Component

I'm using 
createAsync()
 to get and order record.

const order = createAsync(() => getOrder(params.chargeId));


order
 has the following type:

const order: Accessor<Order | undefined>


Because 
order
 could be undefined, I must check for that in my jsx.

I'm trying to do that with 
<Show when={order()}>


I thought adding the 
when={order()}
 would return false if 
order()
 was undefined, and satisfy typescript, but typescript is still complaining with this message:

Type 'Accessor<Order | undefined>' is not assignable to type 'Accessor<Order>'


So, how can I get rid of this "undefined" error?

I'm trying to do this "the solid way," and I can't figure it out.

I get the undefined error when trying to pass the 
order
 to a component like this:
<OrderTable order={order} />


Here's the full component for context. 


import { Order } from "~/types/order";
// CACHE ============================================================
const getOrder = cache(async (chargeId: string) => {
  "use server";
  const { data } = await supabase
    .from("orders")
    .select()
    .eq("stripe_charge_id", chargeId)
    .single();
  if (!data) {
    return undefined;
  } else {
    return data as Order;
  }
}, "order");

export default function OrderDetailsPage() {
  const params = useParams();
  const order = createAsync(() => getOrder(params.chargeId));
  return (
    <>
      <h4>Order Details</h4>
      <Show when={order()} fallback="Order loading...">
        <OrderTable order={order} />
      </Show>
    </>
  );
}
Was this page helpful?
CommunitiesDocsAboutTermsPrivacy