특정 동작 시, useQuery하기

검색 원인

어떤 버튼을 클릭했을 때 method가 GET인 API를 useQuery로 실행하고 싶었다.

 

해결법

useState를 이용해서

useQuery의 옵션 중에서 enabled를 state값으로 주고,

어떤 동작을 했을 때 setState를 true로 바꾼다.

 

추가로, 이렇게 하면 enabled가 계속 true로 남아있기 때문에 GET 요청을 계속해서 하게 된다.

따라서 해당 요청이 성공했을 시에 state값을 다시 false로 바꾸는 코드까지 작성해주었다.

 

// MessageText.tsx

const MessageText = () => {
	const [fetchInvite, setFetchInvite] = useState(false);
	useAcceptInvite(link, fetchInvite, setFetchInvite);
	...

	const ClickInvitationTest = () => {
		setFetchInvite(true);
	}

	return(
		...
		<MessageContainer>
          {hasLink && <LinkText text={link} onClick={ClickInvitationTest} />}
		...
	)
}

// useAcceptInvite.ts

import chatApi from "@api/chat";
import { useQuery } from "@tanstack/react-query";
import { Dispatch, SetStateAction } from "react";

const useAccpetInvite = (
  url: string,
  fetchInvite: boolean,
  setFetchInvite: Dispatch<SetStateAction<boolean>>
) => {
  // url = url.replace("<http://13.125.40.16:8090>", "");
  const { data } = useQuery(["result", { url }], chatApi.acceptInvite, {
    enabled: fetchInvite
    onSuccess: () => {
      setFetchInvite(false); // 요청 성공 시 false 처리
    },
  });
  if (!data?.data?.data) return [];
  return data?.data?.data;
};

export default useAccpetInvite;

 

 

 

---

참고 자료

'useQuery get conditional' 검색어로 구글링함

React-Query: How to fetch queries conditionally | JS-HowTo

function Example() {
  const [fetchPosts, setFetchPosts] = useState(false);

  const { isLoading, error, data } = useQuery(
    ["posts"],
    () =>
      axios
        .get("https://jsonplaceholder.typicode.com/posts")
        .then((res) => res.data),
    {
      enabled: fetchPosts
    }
  );

  if (isLoading && fetchPosts) return "Loading...";

  if (error) return "An error has occurred: " + error.message;

  return (
    <div>
      <button onClick={() => setFetchPosts(true)}>Fetch posts</button>
      <h1>Posts</h1>
      {data?.map((post) => {
        return (
          <div style={{ display: "flex" }}>
            <span>{post.id}-&nbsp;</span>
            <div>{post.title}</div>
          </div>
        );
      })}
    </div>
  );
}

---