[React] Apollo에서 useLazyQuery를 이용하여 필요할 때 query 요청 보내기

안녕하세요. J4J입니다.

 

이번 포스팅은 Apollo에서 useLazyQuery를 이용하여 필요할 때 query 요청 보내는 방법에 대해 적어보는 시간을 가져보려고 합니다.

 

 

 

useLazyQuery 사용 예시

 

관련된 코드는 이전에 작성한 글을 기반으로 추가 변경해보도록 하겠습니다.

 

 

 

링크를 확인해보면 다음과 같이 person query를 사용하는 getPerson이라는 함수를 확인할 수 있습니다.

 

const getPerson = (id: number) => {
    const { loading, error, data } = useQuery(GET_PERSON, {
        variables: {
            id,
        }
    })

    if(loading) return <p>Loading...</p>
    if(error) return (<><p>Error...</p></>)

    return (
        <div style={ListContainer}>
            <div style={PersonBox}>
                <div style={BoxLeft}>
                    <h2>{data.person.id}</h2>
                    <h3>{data.person.name}</h3>
                    <h3>{data.person.phone}</h3>
                </div>
            </div>
        </div>
    )
}

 

 

반응형

 

 

또한 해당 코드의 결과물로 다음과 같은 빨간 테두리의 박스를 확인할 수 있습니다.

 

기존 결과

 

 

 

여기서 하나 알고 가야 될 점은 해당 박스는 웹 페이지가 사용자에게 보임과 동시에 데이터를 서버에 요청하여 화면에 그려지고 있습니다.

 

하지만 상황에 따라 바로 보여지지 않고 특정 action 이후에 데이터가 보여야 되는 경우도 있습니다.

 

이를 해결할 수 있는 여러가지 방법이 존재하겠지만 Apollo를 이용하여 GraphQL을 사용하고 있을 경우에는 Apollo에서 제공해주는 useLazyQuery를 사용해볼 수 있습니다.

 

 

 

그렇기 때문에 useLazyQuery를 이용하여 처음 페이지가 렌더링 되었을 때는 조회 버튼이 생기게 되고 버튼을 누를 경우 빨간 박스가 화면에 보이도록 다음과 같이 코드를 수정해줄 수 있습니다.

 

const getPerson = (id: number) => {
    const [get_person, { loading, error, data }] = useLazyQuery(GET_PERSON);

    if(loading) return <p>Loading...</p>
    if(error) return (<><p>Error...</p></>)

    return (
        <>
            {data ?          
                <div style={ListContainer}>
                    <div style={PersonBox}>
                        <div style={BoxLeft}>
                            <h2>{data.person.id}</h2>
                            <h3>{data.person.name}</h3>
                            <h3>{data.person.phone}</h3>
                        </div>
                    </div>
                </div>
            : <button onClick={() => get_person({ variables: { id } })}>조회</button>}
        </>
    )
}

 

 

728x90

 

 

코드를 위와 같이 수정하고 다시 실행해보면 화면은 다음과 같이 보여집니다.

 

수정 결과

 

 

 

그리고 조회 버튼을 누를 경우 기존에 화면에 보이던 결과가 나오는 것을 확인할 수 있습니다.

 

 

 

 

 

 

이상으로 Apollo에서 useLazyQuery를 이용하여 필요할 때 query 요청 보내는 방법에 대해 간단하게 알아보는 시간이었습니다.

 

읽어주셔서 감사합니다.