map

map

맵을 변수에 할당해서 변수를 리턴하면,
코드가 복잡해졌을때 일일히 변수를 확인하기 힘들어서
리턴에 바로 맵 함수를 넣음

  return (
      <div>
        {FRUITS.map((el) => (
          <div>
            {el.number} {el.title}
          </div>
        ))}
      </div>
  )

deleteBoard 함수 실행이 돼서 1번 게시물이 데이터베이스에서 삭제됨
하지만
새로고침하기 전에는 fetchBoards 실행이 안됨
새로고침 후에 fetchBoards가 실행이 돼서 실제 화면에서도 1번 게시물 삭제가 반영됨

 

=> fetchBoards를 재요청하자

 

fetchBoards 재요청을 refetch라고 함

const onClickDelete = (event) => {
    deleteBoard({
      variables: { number: Number(event.target.id) },
      refetchQueries: [{ query: FETCH_BOARDS }],
    })