[20220627 M]

{
enabled:!!id
}

when id is retrieved

오늘은 (6) 월 (27) 일 / 날씨: (덥고 습해)

한줄: 호호 새로운 신입분이 입사를 하셨다🐰귀요와귀요왕 같이 많이 배워야겠당 헿ㅎ

💼 1) WORK & CODE REVIEW

8 to 17

✍️ 소스코드

• data fetching

  const fetchColors = (pageNumber) =>{
  	return axios.get(`http://localhost:4000/colors?_limit=2&_page=${pageNumber}`)
  }
  
  const [pageNumber,setPageNumber] = useState(1);
  const {isLoading,isError,error,data} = useQuery(["colors",pageNumber], ()=>fetchColors(pageNumber), {keepPreviousData:true})
  

<button disabled={pageNumber ===1} onClick = {()=>setPageNumber(current=>current-1)}>Prev page
<button disabled={pageNumber ===4} onClick = {()=>setPageNumber(current=>current+1)}>Next page

• infinite query (더보기 관련)
  https://www.youtube.com/watch?v=s92apk05kT4&list=PLC3y8-rFHvwjTELCrPrcZlo6blLBUspd2&index=21

const fetchColors =({pageParam=1}) =>{
	return axios.get(`http://localhost:4000/colors?_limit=2&_page=${pageParam}`)
}

const InfiniteQueies = () =>{
	const {isLoading, isError, error, data,hasNextPage,fetchNextPage, isFetching, isFetchingNextPage } = useInfiniteQuery(['colors], fetchColors,{
    	getNextPageParam: (_lastPage, pages)=>{
        if(pages.length<4){
        	return pages.length+1
        }else {
        	return undefined
        }  
        }
    })

}


<button disabled={!hasNextPage} onClick ={fetchNextPage}>Load More</button>
<div>{isFetching && !isFetchingNextPage ? "Fetching....": null}</div>

{data?.pages.map((group,i)=> {
	return (
    	<Fragment key={i}>
  			{
  				group.data.map(color =>(
  					<h2 key={color.id}>
  						{color.id} {color.label}
  					</h2>
  			))
  			}
		</Fragment>
    )
})


}

• Mutations

const addSuperHero = (hero)=>{
	return axios.post('http://localhost:4000/superheroes',hero)
} 

export const useAddSuperHeroData= ()=>{
	return useMutation(addSuperHero)
}

const {mutate:addHero ,isLoading, isError, error } = useSuperHeroData();

const handleAddHeroClick = ()=>{
	console.log({name,alterEgo});
    const hero = {name, alterEgo};
    addHero(hero);
}

• query invalidation (important!)

import {useQueryCliednt} from 'react-query'

const useAddSuperHeroData =()=>{
	const queryClient = useQueryClient()
    return useMutation(addSuperHero, onSuccess:(data)=>{
    queryClient.invalidateQueries("super-heroes")
    }
    
    )

}

• handling mutation response

  queryClient.invalidateQueries("super-heroes")

  => queryClient.setQueryData("super-heroes", (oldQueryData)=> {
  return {
  ...oldQueryData, data: [...oldQueryData.data, data.data]
  }

  })

💻 2) ALGORITHM & STUDY

Every Morning / Every Evening 18시~

✍️ multiple modals

searching

🆎🎾 3) ENGLISH/ GERMAN / TENNIS / SWIMMING

Monday/ Wednesday(Tuesday)/ Thursday (Clarisse랑 날짜 조정하기)
Tuesday / Thursday 21 to 22
Saturday 20 to 22

테니스 이제 더워서 gg
5시 반 헬스

📌 4) ETC (READING/ ECONOMY/ FRIENDS)

Free time

6) TODO & QUESTIONS

❤️ 6월 GOALS

• notion week plan 루틴루틴루틴
• 여유생기면 일기말고 칼럼형태?
• 마이 프로젝트 시간 확보하기
• 질문질문
• 수영 다시하게 되어 행복🐬
• 잔디 좀 심어볼까
• 알고리즘 공부.....ㅇㅅㅇ