How to run useQueries only after clicking a button in react-query?

Question

export const useDeleteArticles = ({ ids, onSuccess }) => {
  const queryResult = useQueries(
    ids.map(id => ({
      queryKey: ["article-delete", id],
      queryFn: () => articlesApi.destroy(id),
    }))
  );

  const isLoading = queryResult.some(result => result.isLoading);

  if (!isLoading) {
    onSuccess();
  }

  return { isLoading, queryResult };
};

This customHook will simply delete some articles.

I tried to use enabled with a state as following.

export const useDeleteArticles = ({ ids, onSuccess, enabled }) => {
  const queryResult = useQueries(
    ids.map(id => ({
      queryKey: ["article-delete", id],
      queryFn: () => articlesApi.destroy(id),
      enabled,
    }))
  );

  const isLoading = queryResult.some(result => result.isLoading);

  if (!isLoading) {
    onSuccess();
  }

  return { isLoading, queryResult };
};

const [enabled, setEnabled] = useState(false);
useDeleteArticles({ ids, onSuccess: refetch, enabled });

enabled && setEnabled(false);    //to avoid api call after deleting the articles

const handleArticleDelete = () => {    //this function will invoke onClick button
    setEnabled(true);
};

But this not making the api call. could anyone help me to implement this in correct way.

Thank you.

Does this answer your question? React-Query: How to useQuery when button is clicked — Konrad
– Konrad, Commented Dec 4, 2022 at 14:34

TkDodo · Accepted Answer · 2022-12-09 19:33:38Z

0

This customHook will simply delete some articles.

a delete operation is almost never a query, but a mutation. Mutations can be fired imperatively by calling the mutate function returned from useMutation. A query is the wrong thing to use for this.

answered Dec 9, 2022 at 19:33

TkDodo

30.4k5 gold badges84 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to run useQueries only after clicking a button in react-query?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related