useQuery-refetch 페이지로 올때 초기화

Harry Jung·2023년 1월 25일
0

초기화

목록 보기
1/1
import { useLocation } from 'react-router-dom'
const QUERY = gql`
 query args($input: SeeContainerByUserInput!){
  seeContainerByUser(input: $input){
    ok,
    totalPages, countItems,
    containers{
      name, arrival, status, closing_date, id, fav, eta, etd, containerSize, 
      owner{name}
    },
    
  }
 }
`


1. const location = useLocation()
2. const {loading, data, refetch} = useQuery(QUERY, { variables: {input: {page,
    ...(select && { status:select }),
  }}})

3. useEffect(()=>{
    refetch()
  }, [location])

4. data?.seeContainerByUser?.user.name 로 바로 사용해야 바로 적용이 됨. 
  1. '/container'라는 페이지가 클릭이 되었을 경우 실행이 됨.
    navigate로 돌아왔을 때 실행이 됨
  2. refetch를 사용할 수 있또록 정의해둠
  3. UseEffect를 사용하여 현재 페이지로 돌아왔을 경우 refetch 실행이 됨
  4. 수정/삭제/등록 등 바로 데이터를 사용하려면 useState를 사용하지 말고 data를 바로 이용하면 됨
profile
Dreamsoft

0개의 댓글