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?

amanuel•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?

amanuel•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 ?

amanuel•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?

amanuel•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?

amanuel•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?

amanuel•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

amanuel•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?

Gaming

Programming

useQuery refetching doesn't re-render?