SolidJS•15mo ago

Any pattern to avoid getting ts angry when using route data fields?

I am using routeData returning an object with 2 fields from it. When I use a combination of <Show> and <For> tags to display my data and try to access any fields TS complains even though the code works. Atm I can mark the "clans" const as ':any' to avoid this but I feel that is not right. Is there a correct pattern I could follow to avoid this?

11 Replies

Martnart•15mo ago

I first wrote something about .latest I should go to bed since there's not a single .latest in your code. o.O Anyway, this is quite common with Solid. The easy answer is: ! This is fine in that it is a known 'problem' and you can safely avoid it. <Show> also has a callback pattern, where your returned value is NotNullable but in this case, since you return a boolean from the when condition, it wouldn't really make sense.

SilverdaggerOP•15mo ago

I accidentally sent the wrong image While I was attempting various ways to fix it - so I changed it later sorry for that

Martnart•15mo ago

Basically, TS doesn't know from a function call that something is defined. It is different when you have something like

const myThing = myAccessor()
myThing // defined

const myThing = myAccessor()
myThing // defined

vs.

if (myAccessor() && myAccessor().someThing) // TS assumes the fn might still be undefined

if (myAccessor() && myAccessor().someThing) // TS assumes the fn might still be undefined

Edit: so you tell it that it's defined:

if (myAccessor() && myAccessor()!.someThing) // TS is okay

if (myAccessor() && myAccessor()!.someThing) // TS is okay

Glad I'm not crazy 😄 I doubted myself there for a second

Tommypop•15mo ago

You can do something like this: https://discord.com/channels/722131463138705510/722131463889223772/1138900596523536384 It's still not ideal lol

Martnart•15mo ago

Yes but it's another way of making TS think something. You are fine in this case to do a non-null-assertion. It is kind of encouraged to a certain degree since the latest <Show> update. It's just a bit hard to get the typing right. But whatever is guarded by a show, will be defined, basically. https://github.com/solidjs/solid/releases/tag/v1.7.0 Specifically

// non-keyed w/o callback... - only updates the one expression, needs ! assertion
<Show when={user()}>
  <div>{user()!.name}</div>
</Show>

// non-keyed w/o callback... - only updates the one expression, needs ! assertion
<Show when={user()}>
  <div>{user()!.name}</div>
</Show>

You could rewrite your when to actually return the output such as when={clans()?.invitations.length > 0 && clans()} and then work with the callback but it seems a bit cumbersome. Wait I just realize that your typing does seem to be off. That error shouldn't appear after a ? operator. https://playground.solidjs.com/anonymous/b542915b-456e-4324-96dc-3106a9cc2f87 Edit: pasted wrong link, sorry

SilverdaggerOP•15mo ago

THis is the full error text I get .

Martnart•15mo ago

What's your routeData look like? It should not return Response

SilverdaggerOP•15mo ago

export function routeData() {
  return createServerData$(async (_, { request }) => {
    const user = await getUser(request)
    if (user === null) return redirect('/login')
    const clans = await prisma.clanmember.findMany({
      select: {
        clan: { select: { id: true, clanname: true } },
        accepted: true,
      },
      where: { userId: user.id },
    })
    return {
      invitations: clans.filter((invite) => !invite.accepted),
      member: clans.filter((member) => member.accepted),
    }
  })
}

export function routeData() {
  return createServerData$(async (_, { request }) => {
    const user = await getUser(request)
    if (user === null) return redirect('/login')
    const clans = await prisma.clanmember.findMany({
      select: {
        clan: { select: { id: true, clanname: true } },
        accepted: true,
      },
      where: { userId: user.id },
    })
    return {
      invitations: clans.filter((invite) => !invite.accepted),
      member: clans.filter((member) => member.accepted),
    }
  })
}

Martnart•15mo ago

Try return redirect('/login') > throw redirect('/login')

SilverdaggerOP•15mo ago

Alas TS is appeased 😄 thanks. Didn't know you could throw the redirect

Martnart•15mo ago

🙂

Gaming

Programming

Any pattern to avoid getting ts angry when using route data fields?