Infinite Fetching Issue with useQueries on Param Changes

[dimmasyusuf]

Hello React Query community,

I’ve been encountering an issue with useQueries in my project. Every time the params object changes, the queries (usersByRoleQueries) start fetching indefinitely. Below is the relevant code snippet:

'use client';

import { useEffect, useState } from 'react';
import { useSearchParams } from 'next/navigation';
import { getUsersByRole, deleteUser as deleteUserAction } from '@/actions/user';
import { useMutation, useQueries, useQueryClient } from '@tanstack/react-query';

export function useUserService(roleIds?: Array<{ id: string; name: string }>) {
  const queryClient = useQueryClient();
  const searchParams = useSearchParams();

  const [params, setParams] = useState({
    page: 1,
    size: 10,
    name: '',
  });

  useEffect(() => {
    const pageParam = searchParams.get('page');
    const sizeParam = searchParams.get('size');
    const nameParam = searchParams.get('name');

    setParams({
      page: pageParam ? Number(pageParam) : 1,
      size: sizeParam ? Number(sizeParam) : 10,
      name: nameParam || '',
    });
  }, [searchParams]);

  // Queries
  const usersByRoleQueries = useQueries({
    queries: (roleIds ?? []).map(({ id, name }) => ({
      queryKey: ['users', id, name, params],
      queryFn: () => getUsersByRole(id, params),
      staleTime: Infinity,
    })),
  });

  // Mutations
  const { mutateAsync: deleteUser, isPending: deleteUserLoading } = useMutation({
    mutationFn: (id: string) => deleteUserAction(id),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['users'] });
    },
  });

  return { usersByRoleQueries, deleteUser, deleteUserLoading };
}

The usersByRoleQueries are created dynamically using the roleIds and the params object, which updates whenever search parameters change. However, this seems to cause an infinite fetching loop.

What I’ve tried so far:

• Debugging to ensure params updates correctly.
• Setting staleTime to Infinity to prevent unnecessary refetching.

Questions:

1. Is the structure of the queryKey potentially causing the issue, particularly with the inclusion of the params object?
2. Are there best practices for using useQueries with dynamic query keys and dependencies like params?
3. Would memoizing the params object or restructuring the component help resolve this?

I’d appreciate any guidance or suggestions. Thank you!

[TkDodo]

seems fine, except that the useEffect is totally unnecessary. Why would you copy the params to state instead of depending on the params directly?