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

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

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

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>'

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>
    </>
  );
}

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>
    </>
  );
}

2 Replies

Brendonovich•3d ago

Use the callback form of Show to get the narrowed version of order() as a new signal

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

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

ChrisThornham•3d ago

That worked like a charm! Thank you! You just solved a big headache. I'll be adding this to my notes. Have a great night.

Gaming

Programming

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