Theo's Typesafe Cult•10mo ago

tRPC: Return undefined if param is not there

In this code cityById could be undefined and I want that this checks this and then weatherData gets undefined. Problem: I can't wrap this in a condition because of React's Hook Rules

  const weatherData = api.weather.getWeather.useQuery(
    {
      coordinates: cityById.coord,
      timezone: dayjs.tz.guess(),
      lang: locale,
    },
    { refetchOnWindowFocus: false, staleTime: 1000 * 60 * 60 /* 1 hour */ },
  );

  const weatherData = api.weather.getWeather.useQuery(
    {
      coordinates: cityById.coord,
      timezone: dayjs.tz.guess(),
      lang: locale,
    },
    { refetchOnWindowFocus: false, staleTime: 1000 * 60 * 60 /* 1 hour */ },
  );

16 Replies

Neto•10mo ago

you can use a enabled: false to block the hook to run before something happens

FleetAdmiralJakob 🗕 🗗 🗙OP•10mo ago

thank you! do you mean something like this?

  const weatherData = api.weather.getWeather.useQuery(
    {
      coordinates: cityById.coord,
      timezone: dayjs.tz.guess(),
      lang: locale,
    },
    {
      refetchOnWindowFocus: false,
      staleTime: 1000 * 60 * 60 /* 1 hour */,
      enabled: cityById !== undefined,
    },
  );

  const weatherData = api.weather.getWeather.useQuery(
    {
      coordinates: cityById.coord,
      timezone: dayjs.tz.guess(),
      lang: locale,
    },
    {
      refetchOnWindowFocus: false,
      staleTime: 1000 * 60 * 60 /* 1 hour */,
      enabled: cityById !== undefined,
    },
  );

if not do you have an example for me?

Neto•10mo ago

something like that yeah

FleetAdmiralJakob 🗕 🗗 🗙OP•10mo ago

Seems not to work 🫤

Neto•10mo ago

the execution still runs only the http call itself isnt dispatched you should still use cityById?.coord

FleetAdmiralJakob 🗕 🗗 🗙OP•10mo ago

but then I have to deal with a possible undefined value in my backend

Neto•10mo ago

But enabled holds back the undefined values

FleetAdmiralJakob 🗕 🗗 🗙OP•10mo ago

the problem is not that it works the problem is that typescript yells at me

Neto•10mo ago

Then the problem isn’t trpc Just know ts better or make ts ignore the line

FleetAdmiralJakob 🗕 🗗 🗙OP•10mo ago

@nyx (Rustular DevRel) the absolute legendary KATT sent me this part of the docs so I will try this out: https://trpc.io/docs/client/react/disabling-queries#typesafe-conditional-queries-using-skiptoken The problem is just that I'm on version 10 of tRPC and this a v11 feature

Disabling Queries | tRPC

To disable queries, you can pass skipToken as the first argument to useQuery or useInfiniteQuery. This will prevent the query from being executed.

Mocha•10mo ago

How about

const weatherData = api.weather.getWeather.useQuery(
    {
      coordinates: cityById!.coord,
      timezone: dayjs.tz.guess(),
      lang: locale,
    },
    {
      refetchOnWindowFocus: false,
      staleTime: 1000 * 60 * 60 /* 1 hour */,
      enabled: Boolean(cityById?.coord),
    },
  );

const weatherData = api.weather.getWeather.useQuery(
    {
      coordinates: cityById!.coord,
      timezone: dayjs.tz.guess(),
      lang: locale,
    },
    {
      refetchOnWindowFocus: false,
      staleTime: 1000 * 60 * 60 /* 1 hour */,
      enabled: Boolean(cityById?.coord),
    },
  );

If that doesn't work, try passing cityById?.coord ?? -1 to see what actually gets passed.

FleetAdmiralJakob 🗕 🗗 🗙OP•10mo ago

I think I just update to v11 since I think I will have to update anyways in the next few months.

Mocha•10mo ago

v11 doesn’t have many breaking changes but has React Query v5 as a peer dependency, which does. Hopefully that’s not a problem, assuming you don’t have too many of .useQuery

FleetAdmiralJakob 🗕 🗗 🗙OP•10mo ago

I ran into this error and still figuring this out. I hope I find the solution soon: https://discord.com/channels/966627436387266600/1218145640752877708

Mocha•10mo ago

Hopefully, but it’d probably be much easier and faster to debug this enabled thing. Are you on the latest v10? I am, and it works perfectly fine for me.

FleetAdmiralJakob 🗕 🗗 🗙OP•10mo ago

OK, yes, maybe I really have to do it

Gaming

Programming

tRPC: Return undefined if param is not there