reactQuery로 짜고있는데...

useQuery 나 mutation같은걸 통해 데이터를 가져오는데 데이터 렌더링이랑 훅스랑겹치지않게 가장 함수끝부분에 배치해야된다해서 그렇게 배치했는데 data 의 null 값여부를 젤 밑에서 하니까 그위에 훅스들은 수동으로 null 값을 체크해야되는데 이런경우는 어떤식으로 하는게 좋을까요?

interface Props {
    children?: React.ReactNode
   
}

const Comp: FC<Props> = () => {
    const {p1, p2} = useParams()

    if (!p1|| !p2) {
        return <>loading error</>;
    }
    const {data} = useQuery({
        queryKey: mykey,
        queryFn: () => myfunc1(userId, codeId)
    });
    const {mutate} = useMutation({
        mutationFn: async (data: CodeRequestEntity) => {
            await myfunc2(data)
            return true

        }
    })
    if(!data){
        return <>loading</>
    }
    const onClickConfirm = useCallback(() => {
        mutate(data)
        onClose()
    }, [])
    return (
        <>
<Button variant={"outlined"} onClick={onClickConfirm}>예
</Button>


        </>
    );
};

export default Comp;

이런식으로 하게되면 분기문을통해 데이터 null 처리를 해서 분기문 밑어부터는 null 처리를 안해도되는데 null 처리를 가장 밑에 렌더링부분에 넣으면 그위에 훅스에선 데이터쓸때마다 null 처리해줘야되서 혹시 다른 방법 있을까요?