execute useMutation inside of onSuccess

[ramunecroft]

export const QueryProvider = ({ children }: { children: React.ReactNode }) => {
  const [queryClient] = React.useState(
    () =>
      new QueryClient({
        defaultOptions: {
          queries: {
            staleTime: 60 * 1000,
          },
        },
        queryCache: new QueryCache({
          onSuccess: (data, query) => {
            if (query.queryKey[0] === "userFetcher") {
              console.log(1); // work
              const { mutate, error } = useMutation<
                UnwrappedPromise<ReturnType<typeof postFetcher>>,
                Error,
                PayloadParameter<typeof postFetcher>
              >({
                mutationFn: postFetcher,
                onSuccess(data, variables, context) {
                  console.log("data", data);
                },
                onError: (err) => console.log(err),
              });
              console.log(1); // not work
              console.log(mutate); 
              mutate({ id: 1, name: "test" });
            }
          },
        }),
      })
  );
  return (
    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
  );
};

I want to use react-query so that when Request A succeeds at the onMount stage, it calls B, and if B succeeds, it calls C. However, in this case, should I mix raw fetch without react-query and react-query instead of using react-query for everything? It seems that useMutation inside onSuccess does not work for some reason.

[TkDodo]

you cannot call a hook in a callback - that's not how react works. You must call the hook at the top level, then invoke .mutate in the callback