본문 바로가기

Typescript & React/useQuery

useQuery 사용 시 반환 값이 undefined 에러

728x90

아래와 같이 작성했다. 

const {data:me} = useQuery<IuserInfo>(
    ["me2", "Member"], () => getMyinfo(ckToken!)
  );

그러나 me의 값이 undefined 이 나온다. 이렇게 되면 me?.속성 이런 방법으로 써야한다. 

문제는 값을 못 받아올 때 입력 값이 필요 할 때 발생 ( 정보 등록의 경우 ) 따라서 해결방법은 non-null assertion operator를 사용하여

user가 undefined값이 아니고 null이 아닐 경우 sessionStorage에 넣고  사용한다. 

 

export async function getMyinfo(token:string) {
  try {
    const response = await fetch(`${BASE_PATH}/member/getmyinfo`, {
      headers: {
        'Content-Type':'application/json; charset=utf-8',
        'x-jwt': token,
      },
      method: 'GET',
    });

    if (!response.ok) {
      throw new Error('Failed to fetch user information');
    }
    const user:IuserInfo = await response.json();
    //🌟🌟user가 undefined 또는 null이 아닐 경우 -> sessionStorage에 값을 넣는 것
    sessionStorage.setItem('userId', user!.userId);  

    return user;
  } catch (error) {
    console.error('Error fetching user information:', error);
    throw error;
  }
  
}
728x90

'Typescript & React > useQuery' 카테고리의 다른 글

refetch를 통해 삭제 구현  (0) 2024.02.15
useQuery를 사용해보자  (0) 2024.02.12