passive-yellow

New mutation cancelling the previous one

I have a queue with requests it executes when it can. When I add 2 requests it seems to "cancel" the previous one; it doesn't execute its onSucces function (which is another request). What am I doing wrong? My app is basically optimistically allowing to create "scenarios" until network_ids is available, then it gets executed. my loop calling my hook to execute the mutation:

  useEffect(() => {
    const queue = queues[activeDigitalTwin.id];
    if (activeDigitalTwin.network_ids.length > 0 && queue && queue.length > 0) {
      queues[activeDigitalTwin.id].forEach((values) => {
        executeCreateScenario(values);
      });
      clearQueue(activeDigitalTwin.id);
    }
  }, [
    activeDigitalTwin.id,
    activeDigitalTwin.network_ids,
    clearQueue,
    executeCreateScenario,
    queues,
  ]);

  useEffect(() => {
    const queue = queues[activeDigitalTwin.id];
    if (activeDigitalTwin.network_ids.length > 0 && queue && queue.length > 0) {
      queues[activeDigitalTwin.id].forEach((values) => {
        executeCreateScenario(values);
      });
      clearQueue(activeDigitalTwin.id);
    }
  }, [
    activeDigitalTwin.id,
    activeDigitalTwin.network_ids,
    clearQueue,
    executeCreateScenario,
    queues,
  ]);

my hook:

const useCreateScenario = (activeId: number) => {

  const queryClient = useQueryClient();

  const createRandomRoutesMutation = useMutation({
    mutationFn: generateRandomRoutes,
  });

  const createScenarioMutation = useMutation({
    mutationFn: createScenario,
    onSuccess: () =>
      queryClient.invalidateQueries([
        "getScenarios",
        activeId,
      ] as InvalidateQueryFilters),
  });

  function executeCreateScenario(values: ScenarioFormType) {
    createRandomRoutesMutation.mutate(activeId, {
      onSuccess: (data) => {
        createScenarioMutation.mutate({
            [values here]
        });
      },
    });
  }

  return { executeCreateScenario };
};

const useCreateScenario = (activeId: number) => {

  const queryClient = useQueryClient();

  const createRandomRoutesMutation = useMutation({
    mutationFn: generateRandomRoutes,
  });

  const createScenarioMutation = useMutation({
    mutationFn: createScenario,
    onSuccess: () =>
      queryClient.invalidateQueries([
        "getScenarios",
        activeId,
      ] as InvalidateQueryFilters),
  });

  function executeCreateScenario(values: ScenarioFormType) {
    createRandomRoutesMutation.mutate(activeId, {
      onSuccess: (data) => {
        createScenarioMutation.mutate({
            [values here]
        });
      },
    });
  }

  return { executeCreateScenario };
};

3 Replies

deep-jade•17mo ago

https://tkdodo.eu/blog/mastering-mutations-in-react-query#some-callbacks-might-not-fire

Mastering Mutations in React Query

Learn all about the concept of performing side effects on the server with React Query.

passive-yellowOP•17mo ago

thx!

adverse-sapphire•17mo ago

i need to read your entire blog 😄

Gaming

Programming

New mutation cancelling the previous one

Did you find this page helpful?