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
Netoβ€’8mo ago
you can use a enabled: false to block the hook to run before something happens
FleetAdmiralJakob πŸ—• πŸ—— πŸ—™
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
Netoβ€’8mo ago
something like that yeah
FleetAdmiralJakob πŸ—• πŸ—— πŸ—™
Seems not to work 🫀
No description
Neto
Netoβ€’8mo ago
the execution still runs only the http call itself isnt dispatched you should still use cityById?.coord
FleetAdmiralJakob πŸ—• πŸ—— πŸ—™
but then I have to deal with a possible undefined value in my backend
Neto
Netoβ€’8mo ago
But enabled holds back the undefined values
FleetAdmiralJakob πŸ—• πŸ—— πŸ—™
the problem is not that it works the problem is that typescript yells at me
Neto
Netoβ€’8mo ago
Then the problem isn’t trpc Just know ts better or make ts ignore the line
FleetAdmiralJakob πŸ—• πŸ—— πŸ—™
@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
Mochaβ€’8mo 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 πŸ—• πŸ—— πŸ—™
I think I just update to v11 since I think I will have to update anyways in the next few months.
Mocha
Mochaβ€’8mo 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 πŸ—• πŸ—— πŸ—™
I ran into this error and still figuring this out. I hope I find the solution soon: https://discord.com/channels/966627436387266600/1218145640752877708
Mocha
Mochaβ€’8mo 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 πŸ—• πŸ—— πŸ—™
OK, yes, maybe I really have to do it
Want results from more Discord servers?
Add your server