import { useQuery, useMutation } from '@tanstack/react-query';

const YourComponent = () => {
  // a라는 GET 요청을 수행하는 query
  const { data: dataA } = useQuery('getDataA', async () => {
    const response = await yourApiCallForA();
    return response.data;
  });

  // b라는 POST 요청을 수행하는 mutation
  const { mutate: mutateB, data: dataB } = useMutation(
    async (hash) => {
      const response = await yourApiCallForB(hash);
      return response.data;
    },
    {
      onSuccess: (data) => {
        // data.status가 없을 경우 계속해서 b 요청을 보냄
        if (!data.status) {
          const hash = data.hash; // 혹시라도 받아온 hash가 있다면 사용
          // 여기서 다시 b라는 POST 요청을 보냄
          mutateB(hash);
        } else if (data.status === true) {
          // data.status가 true인 경우 b라는 GET 요청을 수행하는 query
          queryClient.invalidateQueries('getDataB');
        }
      },
    }
  );

  // b라는 GET 요청을 수행하는 query
  const { data: dataBAfterGet } = useQuery('getDataB', async () => {
    const response = await yourApiCallForBAfterGet();
    return response.data;
  });

  // 만약 b의 GET 요청 결과에서 hash를 얻을 수 있다면 다시 b라는 POST 요청을 보냄
  if (dataBAfterGet && dataBAfterGet.hash) {
    mutateB(dataBAfterGet.hash);
  }

  return (
    <div>
      {/* Your component rendering logic */}
    </div>
  );
};

만약 커스텀 훅으로 만든다면

import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';

const useCustomLogic = () => {
  const queryClient = useQueryClient();

  const { data: dataA } = useQuery('getDataA', async () => {
    const response = await yourApiCallForA();
    return response.data;
  });

  const { mutate: mutateB, data: dataB } = useMutation(
    async (hash) => {
      const response = await yourApiCallForB(hash);
      return response.data;
    },
    {
      onSuccess: (data) => {
        if (!data.status) {
          const hash = data.hash;
          mutateB(hash);
        } else if (data.status === true) {
          queryClient.invalidateQueries('getDataB');
        }
      },
    }
  );

  const { data: dataBAfterGet } = useQuery('getDataB', async () => {
    const response = await yourApiCallForBAfterGet();
    return response.data;
  });

  if (dataBAfterGet && dataBAfterGet.hash) {
    mutateB(dataBAfterGet.hash);
  }

  return {
    dataA,
    dataB,
    dataBAfterGet,
  };
};

export default useCustomLogic;

import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';

const useCustomLogic = () => {
  const queryClient = useQueryClient();

  // a라는 POST 요청을 수행하는 mutation
  const { mutate: mutateA } = useMutation(
    async (payload) => {
      const response = await yourApiCallForA(payload);
      return response.data;
    }
  );

  // b라는 GET 요청을 수행하는 query
  const { data: dataB } = useQuery(
    'getDataB',
    async (hash) => {
      const response = await yourApiCallForB(hash);
      return response.data;
    },
    {
      enabled: false, // 초기에는 비활성화
    }
  );

  // c라는 POST 요청을 수행하는 mutation
  const { mutate: mutateC } = useMutation(
    async (hash) => {
      const response = await yourApiCallForC(hash);
      return response.data;
    },
    {
      onSuccess: (data) => {
        // c 요청이 성공하면 b(GET) 요청을 다시 보냄
        queryClient.invalidateQueries('getDataB');
        mutateB(data.hash);
      },
    }
  );

  // b라는 GET 요청을 수행하는 mutation
  const { mutate: mutateB } = useMutation(
    async (hash) => {
      const response = await yourApiCallForB(hash);
      return response.data;
    },
    {
      onSuccess: (data) => {
        // data.status가 없을 경우 계속해서 b 요청을 보냄
        if (!data.status) {
          const hash = data.hash;
          queryClient.invalidateQueries('getDataB');
          mutateB(hash);
        } else if (data.status === true) {
          // data.status가 true인 경우 c라는 POST 요청을 실행해 받아온 데이터의 hash값으로 다시 b(GET) 요청을 보냄
          queryClient.invalidateQueries('getDataB');
          mutateC(data.hash);
        }
      },
    }
  );

  return {
    mutateA,
    mutateB,
    mutateC,
    dataB,
  };
};

export default useCustomLogic;

import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';

const useCustomLogic = () => {
  const queryClient = useQueryClient();

  // A라는 POST 요청을 수행하는 mutation
  const { mutate: mutateA } = useMutation(
    async (payload) => {
      const response = await yourApiCallForA(payload);
      return response.data.hash; // A 요청에서 반환되는 hash값을 추출
    }
  );

  // B라는 GET 요청을 수행하는 query
  const { data: dataB } = useQuery(
    'getDataB',
    async (hash) => {
      const response = await yourApiCallForB(hash);
      return response.data;
    },
    {
      enabled: false, // 초기에는 비활성화
    }
  );

  // C라는 POST 요청을 수행하는 mutation
  const { mutate: mutateC } = useMutation(
    async (param) => {
      const response = await yourApiCallForC(param);
      return response.data.hash; // C 요청에서 반환되는 hash값을 추출
    },
    {
      onSuccess: (hash) => {
        // C 요청이 성공하면 B(GET) 요청을 다시 보냄
        queryClient.invalidateQueries('getDataB');
        mutateB(hash);
      },
    }
  );

  // B라는 GET 요청을 수행하는 mutation
  const { mutate: mutateB } = useMutation(
    async (hash) => {
      const response = await yourApiCallForB(hash);
      return response.data;
    },
    {
      onSuccess: (data) => {
        // data.status가 undefined이거나 data가 없는 경우 다시 B(GET) 요청을 보냄
        if (!data || data.status === undefined) {
          queryClient.invalidateQueries('getDataB');
          mutateB(data.hash);
        } else if (data.status === true) {
          // data.status가 true인 경우 C(POST) 요청을 보내고, C 요청 결과값으로 다시 B(GET) 요청을 보냄
          queryClient.invalidateQueries('getDataB');
          mutateC(yourCParam); // yourCParam은 C 요청에 필요한 매개변수입니다.
        }
      },
    }
  );

  return {
    mutateA,
    mutateB,
    mutateC,
    dataB,
  };
};

export default useCustomLogic;

import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';

const useCustomLogic = () => {
  const queryClient = useQueryClient();

  // A라는 POST 요청을 수행하는 mutation
  const { mutate: mutateA } = useMutation(
    async (payload) => {
      const response = await yourApiCallForA(payload);
      return response.data.hash; // A 요청에서 반환되는 hash값을 추출
    }
  );

  // B라는 GET 요청을 수행하는 query
  const { data: dataB } = useQuery(
    'getDataB',
    async (hash) => {
      const response = await yourApiCallForB(hash);
      return response.data;
    },
    {
      enabled: false, // 초기에는 비활성화
    }
  );

  // C라는 POST 요청을 수행하는 mutation
  const { mutate: mutateC } = useMutation(
    async (param) => {
      const response = await yourApiCallForC(param);
      return response.data.hash; // C 요청에서 반환되는 hash값을 추출
    }
  );

  // B라는 GET 요청을 수행하는 mutation
  const { mutate: mutateB } = useMutation(
    async (hash) => {
      const response = await yourApiCallForB(hash);
      return response.data;
    },
    {
      onSuccess: (data) => {
        // data.status가 undefined이거나 data가 없는 경우 다시 B(GET) 요청을 보냄
        if (!data || data.status === undefined) {
          queryClient.invalidateQueries('getDataB');
          mutateB(data.hash);
        } else if (data.status === true) {
          // data.status가 true인 경우 C(POST) 요청을 보내고, C 요청 결과값으로 다시 B(GET) 요청을 보냄
          queryClient.invalidateQueries('getDataB');
          mutateC(yourCParam); // yourCParam은 C 요청에 필요한 매개변수입니다.
        }
      },
    }
  );

  // A, B, C 요청을 연결하여 실행하는 함수
  const performRequests = async (payload) => {
    const hash = await mutateA(payload);
    mutateB(hash);
  };

  return {
    performRequests,
    dataB,
  };
};

export default useCustomLogic;

import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';

const useCustomLogic = () => {
  const queryClient = useQueryClient();

  // A라는 POST 요청을 수행하는 mutation
  const { mutate: mutateA } = useMutation(
    async (payload) => {
      const response = await yourApiCallForA(payload);
      return response.data.hash; // A 요청에서 반환되는 hash값을 추출
    }
  );

  // B라는 GET 요청을 수행하는 query
  const { data: dataB } = useQuery(
    'getDataB',
    async (hash) => {
      const response = await yourApiCallForB(hash);
      return response.data;
    },
    {
      enabled: false, // 초기에는 비활성화
    }
  );

  // C라는 POST 요청을 수행하는 mutation
  const { mutate: mutateC } = useMutation(
    async (param) => {
      const response = await yourApiCallForC(param);
      return response.data.hash; // C 요청에서 반환되는 hash값을 추출
    },
    {
      onSuccess: (hash) => {
        // C 요청이 성공하면 B(GET) 요청을 다시 보냄
        queryClient.invalidateQueries('getDataB');
        mutateB(hash);
      },
    }
  );

  // B라는 GET 요청을 수행하는 mutation
  const { mutate: mutateB } = useMutation(
    async (hash) => {
      const response = await yourApiCallForB(hash);
      return response.data;
    },
    {
      onSuccess: (data) => {
        // data.status가 undefined이거나 data가 없는 경우 다시 B(GET) 요청을 보냄
        if (!data || data.status === undefined) {
          queryClient.invalidateQueries('getDataB');
          mutateB(data.hash);
        } else if (data.status === true) {
          // data.status가 true인 경우 C(POST) 요청을 보내고, C 요청 결과값으로 다시 B(GET) 요청을 보냄
          mutateC(yourCParam); // yourCParam은 C 요청에 필요한 매개변수입니다.
        }
      },
    }
  );

  return {
    mutateA,
    mutateB,
    mutateC,
    dataB,
  };
};

export default useCustomLogic;