Refetch/mutation in an interval

[lockr7]

Hi,

I have a timer on the server that starts at 0 and increments every second. It expires at 5 minutes.

Every minute, I want to do something depending on the user’s activity.

• If a user is active, I want to make a mutation to reset the timer to 0
• If a user is inactive, I want to make a query to check the timer

When the timer is >=5 minutes, the checkTimer call will error.

I found https://overreacted.io/making-setinterval-declarative-with-react-hooks/ to make a useInterval hook, I was wondering if it's possible to query/mutate with it.

something like this...

const useTimer = () => {
    const queryClient = useQueryClient();

    const checkTimerQuery = useQuery({
        queryKey: ['timer'],
        queryFn: checkTimer,
        enabled: false,
        onError: (error) => {}, // handle expired timer
    });

    const resetTimerMutation = useMutation({
        mutationFn: resetTimer,
        onSuccess: () =>
            queryClient.setQueryData(['timer'], { timeInactive: 0 }),
    });

    useInterval(() => {
        if (isUserActive) {
            resetTimerMutation.mutate();
        } else {
            checkTimerQuery.refetch();
        }
    }, 60000);
};

[lockr7]

Anybody have any thoughts on this pattern?

[lockr7]

Noticed that there's a refetchInterval option on useQuery but don't think I can use it in this case because I only want to refetch when the user is active? Or does refetchInterval respect the enabled prop?

[TkDodo]

you can pass a function to refetchInterval and yes, it also respects enabled.

[lockr7]

you can pass a function to refetchInterval and yes, it also respects enabled.

Thanks, appreciate the response! Is there anything wrong with the snippet in the original post? To me, it makes it a bit more clear that it's either a timer check or a timer reset every minute rather than using refetchInterval and having a separate useInterval for the mutation.

[TkDodo]

I don't fully understand the requirements. Running a mutation in an interval seems conceptually wrong, as a mutation is usually triggered by a user interaction. Probably depends on what "user is active" means in your situation. I would probably only re-set the timer with the mutation when the user "does something", which implies a user interaction, which means we do have event handlers where we could fire the mutation.

For the query, I'd use refetchInterval because it takes other things into consideration. Like, it re-starts the timer if the query was run by some other means.

[lockr7]

Ah that makes sense, a more real world use case I was thinking of was automatically logging out a user after a period of inactivity.

So you're suggesting immediately firing the mutation in whatever event handler is used to determine that the user is active or inactive. And then using refetchInterval to check the timer every minute.

I could potentially add some logic so that we don't run a mutation more than once in a minute if the user has multiple interactions.