Using queryClient as a useCallback dependency? Possibly dangerous?

Hi all.

Chasing a very frustrating bug in production. We noticed occasionally our users would submit 20k requests in under a minute, effectively DoS'ing us. We're adding throttling etc, but I want to track down WHY they are sending so many requests. We think it's due to invalidation of some query keys, causing refetches to happen.

I cam across this code:

const onUpload = React.useCallback(() => {
  queryClient.invalidateQueries(
    getParticipantBaseKey({
      organizationId: organization.id,
      participantId,
    }),
  );
  hide();
}, [organization.id, participantId, queryClient, hide]);

const onUpload = React.useCallback(() => {
  queryClient.invalidateQueries(
    getParticipantBaseKey({
      organizationId: organization.id,
      participantId,
    }),
  );
  hide();
}, [organization.id, participantId, queryClient, hide]);

const onUpload = React.useCallback(() => {
  queryClient.invalidateQueries(
    getParticipantBaseKey({
      organizationId: organization.id,
      participantId,
    }),
  );
  hide();
}, [organization.id, participantId, queryClient, hide]);

const onUpload = React.useCallback(() => {
  queryClient.invalidateQueries(
    getParticipantBaseKey({
      organizationId: organization.id,
      participantId,
    }),
  );
  hide();
}, [organization.id, participantId, queryClient, hide]);

We call this when a file is finished uploading. Note the

queryClient

queryClient

in the dep array? Is it possible this is changing, and causing the

invalidateQueries

invalidateQueries

invalidateQueries

invalidateQueries call to run many times? We will destructure and use just the

invalidateQueries

invalidateQueries

invalidateQueries

invalidateQueries fn as a dep, as it's good practice, but I want to know if this is the cause/

Does anyone have any ideas?

Using queryClient as a useCallback dependency? Possibly dangerous?

Similar Threads

Similar Threads

Similar Threads