Theo's Typesafe Cult•2y ago

useQuery refetching doesn't re-render?

Is this expected behavior? I can't find anything about it online, but I really thought it would make sense to force a re-render similar to when updating a state in the component. Can someone help me figure out the conventional way of re-rendering when useQuery hook refetches and gets new data?

32 Replies

benten•2y ago

It should rerender Like I've never needed to force a rerender with useQuery do you have a non-standard setup or something?

amanuelOP•2y ago

    const {
        data: availabilitiesAndBookings,
        isLoading,
        refetch: refetchAvailabilitiesAndBookings,
    } = trpc.availability.getAvailabilitiesAndBookings.useQuery(
        {
            currentMonthParam: currentMonth.toISOString(),
            scheduleId,
            tutorId,
            timezone,
        },
        {
            placeholderData: blocks,
        }
    );

    const {
        data: availabilitiesAndBookings,
        isLoading,
        refetch: refetchAvailabilitiesAndBookings,
    } = trpc.availability.getAvailabilitiesAndBookings.useQuery(
        {
            currentMonthParam: currentMonth.toISOString(),
            scheduleId,
            tutorId,
            timezone,
        },
        {
            placeholderData: blocks,
        }
    );

and then I do this:

const entries =
        (availabilitiesAndBookings && Object.entries(availabilitiesAndBookings)) ||
        Object.entries(blocks);

const entries =
        (availabilitiesAndBookings && Object.entries(availabilitiesAndBookings)) ||
        Object.entries(blocks);

in the component right before the return <div>....<div> etc and then this to actually to render the contents:

entries.map(([day, availability], index) => {
return (...)

entries.map(([day, availability], index) => {
return (...)

benten•2y ago

And to be clear, you can see it making a network request in the browser but the state doesn't change until something else forces a rerender?

amanuelOP•2y ago

Yep! That's exactly what I am doing right now, I can see the trpc/network request and I can confirm in a number of ways that the useQuery is refetching and successfully returning new data I can also easily just put a console.log() anywhere in the component to confirm that no re-render is happening I've also used the react dev tools profiler and I can see that it doesn't re-render

benten•2y ago

I'm a bit confused by this api what is refetch: refetchAvailabilitiesAndBookings ?

amanuelOP•2y ago

I use that after I do a mutation to refetch/invalidate the query But that's not used right now in this example For example, I know that whenever I focus on my window it will do a network call, and I can see the trpc logs in the network tab, but there is no re-render

benten•2y ago

is your data changing?

amanuelOP•2y ago

Yep! I am manually changing my logic to force a different return just on refocus of the window

benten•2y ago

interesting is there a repo I could take a quick look at?

amanuelOP•2y ago

So right now, I change the logic so that it returns something differently, I can see a network call being made and it returns the new data, then I click on something that I have connected to a state so it forces a re-render and then it shows the actual data I can't show it 😦 It's a private repo It's just that trpc route though

benten•2y ago

other trpc routes with useQuery rerender on refetch? Even on the same page/component?

amanuelOP•2y ago

I haven't tried/noticed yet since the data of all others always return the same To be clear, the expected behavior is a re-render on every single refetch?

benten•2y ago

Yeah so the query cache acts like state so when a fetch resolves it updates the query cache which would then do normal react stuff like queuing a render It's really hard to tell though because it could be a non-standard react query setup, something wrong with the page, a bug with trpc etc

amanuelOP•2y ago

What would be a non-standard react query setup? Ok, let me make the simplest setup, I'll try it out right now

benten•2y ago

Not sure, are you using ct3a?

amanuelOP•2y ago

I scaffolded it on my own, but the trpc part of it all should all be the same I used ct3a as review to make sure the setup was correct initially I'm trying something now, I'll let you know if it works or not

benten•2y ago

amanuelOP•2y ago

Ok, so with a trivial example, it only re-renders when the object changes so for example, I did this

    testingRerender: publicProcedure.query(async () => {
        return { hello: "world" };
    }),

    testingRerender: publicProcedure.query(async () => {
        return { hello: "world" };
    }),

And then I did a refetch interval if I kept the object the same it doesn't re-render then if I go and change "world" it re-renders

benten•2y ago

well it's probably rerendering because of hot reload

amanuelOP•2y ago

true... let me do it so that it returns something random or a timestamp

benten•2y ago

amanuelOP•2y ago

Ok that worked

amanuelOP•2y ago

Strange So it has something to do with not being able to detect changes to the return object?

benten•2y ago

I wonder if they added some sort of deep comparison I suppose they could as the response is json initially right?

amanuelOP•2y ago

Ok, I just tested again and it suddenly works.... bruhhhhhh what is this

benten•2y ago

lmao

amanuelOP•2y ago

I just did the same exact test, I modified the db manually and I did a refetch interval and it picked up on the change and re-rendered so sorry for wasting your time Thanks for helping out though, I really appreciate it

benten•2y ago

all good, sounds like some sort of bug

amanuelOP•2y ago

yeah I don't know what it is, again it kind of didn't work right now with a different modification It's a bit unreliable I have to migrate to using webhooks eventually though, I don't want to rely on refetching intervals

benten•2y ago

my goto is literally restarting my computer (usually because wsl2 crashes 10x/day) and that fixes a surprisingly large amount of issues I'd try that to see or at least restart node

amanuelOP•2y ago

yeah, thanks!

benten•2y ago

good luck

Gaming

Programming

useQuery refetching doesn't re-render?