22.02.05 useEffect안에서 useQuery 쓰고 싶을 때

useQuery로 DB에 있는 데이터 불러서 쓰려고 하는데 커스텀 훅으로 만들어서 

외부 컴포넌트에서 값을 불러서 useEffect로 업데이트를 하려고 했더니 

*잘못 짠 코드 

//커스텀 훅 함수 내부
export const useGetData = {
	const {loading, error, data} = useQuery(GET_QUERY)
    
    return data.findManyData[0].data
}

//상위 컴포넌트
const Component = () => {
    useEffect(() => {
        const data = useGetData()
    }, [data])

	return <Text>{data}</Text>
}

위와 같이 리액트 훅 규칙에 따르면 callback 함수 즉 useEffect 안에서 실행되는 함수로 내가 만든 훅 함수를 사용할 수 없다는 것이다. 

그렇다면 useEffect 안에서 useState의 상태 변경함수 setState를 사용할 수 있으므로 

아래 참고 문서와 같이 커스텀 훅 함수 최상단에 useQuery로 값을 가져오고 

useEffect안에서 useQuery에 대한 data가 존재한다면 setState 함수로 상태를 변경할 수가 있다. 

 

*변경한 코드

//커스텀 훅 함수 내부
export const useGetData = {
	const {loading, error, data} = useQuery(GET_QUERY)
    const [value, setValue] = useState(0)
    
    useEffect(() => {
    	if(data){
        	setValue(data.findManyData[0].data)
        }
    })
    
    return value
}

//상위 컴포넌트
const Component = () => {
    const data = useGetData()
    
	return <Text>{data}</Text>
}

 

참고문서링크 

https://github.com/trojanowski/react-apollo-hooks/issues/158

should I put useQuery inside a useEffect and should I store returned data in state? · Issue #158 · trojanowski/react-apollo-ho