8/12 - 4주 프로젝트

refetchQueries

 

refetchQueries란 무엇인가?

 

mutation 요청 후에 data 가 변경되더라도 Query 요청을 하지 않기 때문에 사용하는 프로퍼티이다.

refetchQueries 의 경우 비동기 적으로 처리되며, mutation 요청이 완료 (해결)되기 전에 대기하지 않는다.

 

awaitRefetchQueries 의 경우 default 는 false 지만 true  로 설정하면 true 로 설정하면 mutation 요청이
완료된 것으로 간주되기 전에 re fetch 된 Query 가 완료된다.

 

코드 ex)

<Mutation<uploadUser>
	mutation={USER_IMG}
	variables={{
	profileImage: this.state.userPhoto,
	}}
	
    refetchQueries={[{
		query: MY_PROFILE,
		variables: {
		id: personalId,
			},
		},
	]}
>

---

오늘 해결하지 못한 error 발생. props 가 변화되면서?! 생긴 문제인 것 같다. lifeCycle 을 조금 더 공부하고 해결해볼 예정..

componentWillReceiveProps

만약 props의 변경에 따라서 상태를 변경해야 한다면, 이 componentWillReceiveProps 메소드가 필요하다. 
this.props와 nextProps를 비교해서 중요한 변화(significant change)가 있다면 해당 메소드를 실행한다.

 

---

 

나중에 아폴로 클라이언트에서 infity scroll 구현할 일이 생긴다면 참조할 자료

 

https://sysgears.com/articles/how-to-implement-infinite-scroll-with-graphql-and-react/

How to implement infinite scroll with GraphQL and React

https://medium.com/@alfianlosari/graphql-cursor-infinite-scroll-pagination-with-react-apollo-client-and-github-api-fafbc510b667

React Apollo Client GraphQL Cursor Infinite Scroll Pagination with GitHub API

https://www.apollographql.com/docs/react/advanced/caching/#incremental-loading-fetchmore

Caching data

https://blog.apollographql.com/pagination-and-infinite-scrolling-in-apollo-client-59ff064aac61?gi=94fbcaa455ef

Pagination and Infinite Scrolling in Apollo Client