T
TanStack•3y ago
stormy-gold

Mutation stuck at loading

Hi there! I've searched and found this issue that seems related: https://discord.com/channels/719702312431386674/1081312089282461826 Basically I'm calling a mutation from an effect but its status remains loading . However, if I add the onSettled callback, data is defined so I don't understand what's wrong. Here is a simplified version of my code, thanks in advance for the help! 
"use client";
import {useMutation} from "@tanstack/react-query";
import {useSearchParams} from "next/navigation";
import {useEffect,useRef} from "react";

function usePackageAPI() {
  function api({path,method,headers,body}: {
    path: string;
    method: "GET" | "POST" | "PUT" | "DELETE";
    headers?: HeadersInit;
    body?: any;
  }) {
    return fetch("..." + path, {method,headers,body: body ? JSON.stringify(body) : null,});
  }

  async function process({ packageLink }: { packageLink: string }) {
    const data = await api({
      path: "/process",
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        Accept: "application/json",
      },
      body: { package_link: packageLink },
    }).then((res) => res.json());
    return data;
  }

  return { process };
}

export default function Page() {
  const searchParams = useSearchParams();
  const packageLink = searchParams?.get("packageLink") || undefined;
  const enabled = !!packageLink;
  const api = usePackageAPI();
  const isInitializedRef = useRef(false);
  const processMutation = useMutation({
    mutationKey: ["package-api", "process", packageLink],
    mutationFn: api.process,
    onSettled: (data) => console.log(data)
  });

  useEffect(() => {
    if (!enabled || isInitializedRef.current) return;
    isInitializedRef.current = true;
    processMutation.mutate({ packageLink });
  }, [enabled, packageLink, processMutation]);

  return (
<>
{processMutation.isSuccess ? <div>{JSON.stringify(processMutation.data, null, 2)}</div> : <div>{processMutation.status}</div>}
</>
  );
}
"use client";
import {useMutation} from "@tanstack/react-query";
import {useSearchParams} from "next/navigation";
import {useEffect,useRef} from "react";

function usePackageAPI() {
  function api({path,method,headers,body}: {
    path: string;
    method: "GET" | "POST" | "PUT" | "DELETE";
    headers?: HeadersInit;
    body?: any;
  }) {
    return fetch("..." + path, {method,headers,body: body ? JSON.stringify(body) : null,});
  }

  async function process({ packageLink }: { packageLink: string }) {
    const data = await api({
      path: "/process",
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        Accept: "application/json",
      },
      body: { package_link: packageLink },
    }).then((res) => res.json());
    return data;
  }

  return { process };
}

export default function Page() {
  const searchParams = useSearchParams();
  const packageLink = searchParams?.get("packageLink") || undefined;
  const enabled = !!packageLink;
  const api = usePackageAPI();
  const isInitializedRef = useRef(false);
  const processMutation = useMutation({
    mutationKey: ["package-api", "process", packageLink],
    mutationFn: api.process,
    onSettled: (data) => console.log(data)
  });

  useEffect(() => {
    if (!enabled || isInitializedRef.current) return;
    isInitializedRef.current = true;
    processMutation.mutate({ packageLink });
  }, [enabled, packageLink, processMutation]);

  return (
<>
{processMutation.isSuccess ? <div>{JSON.stringify(processMutation.data, null, 2)}</div> : <div>{processMutation.status}</div>}
</>
  );
}
5 Replies
xenogeneic-maroon
xenogeneic-maroon•3y ago
react 18, strict mode there's a recent issue / discussion somewhere on github i've explained everything there. your "ref workaround" makes thing worse
stormy-gold
stormy-goldOP•3y ago
Gonna search for it For now I edited to this and it seems to work, but that's really hacky: 
setTimeout(() => processMutation.mutate({ packageLink }), 10)
setTimeout(() => processMutation.mutate({ packageLink }), 10)
Thanks for your help!
stormy-gold
stormy-goldOP•3y ago
Is it what you are talking about? https://github.com/TanStack/query/issues/5341
GitHub
Mutations can not be started from an effect in Reacts StrictMode · ...
Describe the bug When firing a mutation from a useEffect on component creation the mutation get's stuck in loading state, despite the underlying request finishing. This only seems to happen in ...
xenogeneic-maroon
xenogeneic-maroon•3y ago
yep
stormy-gold
stormy-goldOP•3y ago
great thanks

Did you find this page helpful?