내일 배움 캠프 React 12주차 WIL

Week Goal 목표

• Typescript 기본기
• react-qeury axios todolist [GitHub링크]

Week Question 질문

• Typescript type 종류
• Typescript interface란?
• Typescript 이벤트 type

Week Attempt 시도

• react-qeury crud

Week Result 결과

  const queryClient = useQueryClient()

  // 리스트 axios get
  // const [lists,SetLists] = useState([]);

  const fetchLists = async() => {
    const {data} = await axios.get("http://localhost:3001/lists")
    // SetLists(data);
    return data
  }

  // useEffect(() => {
  //   fetchLists();
  // }, []); 
  
  
  
  
  // 리스트 axios post
  
  const [title, setTitle] = useState('')
  const [content, setContent] = useState('')
  
  
  const lists = {
    title,
    content,
  }
  
  
  const postList = async(lists) => {
    
    // el.preventDefault()
    
    
    await axios.post("http://localhost:3001/lists", lists); 
		
		// fetchLists();
  };
  
  
  // 리스트 axios delete
  
  const deletList = (listId) => {
    axios.delete(`http://localhost:3001/lists/${listId}`);
    // fetchLists();
  };

  //delete mutation
  const deleteMutation = useMutation(deletList,{
    onSuccess:()=>{
      queryClient.invalidateQueries("lists")
    }
  })

  const ondeletehandler = (listId)=>{
    deleteMutation.mutate(listId)
  }
  //post Mutation
  const postmutation = useMutation(postList,{
    onSuccess:()=>{
      queryClient.invalidateQueries('lists')
    }
  })

  const onsubmithandler = ()=>{
    postmutation.mutate(lists)
  }
    // 수정
    // const [editComment, setEditComment] = useState();

    // const commentMutation = useMutation(changeDetail, {
    //   onSuccess: () => {
    //     queryClient.invalidateQueries([category, listId]);
    //   },
    // });
  
    // const editHandler = (id, value) => {
    //   setEditComment(value);
    //   dispatch(onEdit(id));
    // };
  
    // const submitHandler = () => {
    //   const newComments = comments.map((x) => {
    //     if (x.id === comment.id) {
    //       return { ...x, comment: editComment };
    //     } else {
    //       return { ...x };
    //     }
    //   });
    //   commentMutation.mutate([category, listId, { comments: newComments }]);
    //   dispatch(offEdit());
    // };
  // query get
  const { isLoading, isError, data } = useQuery("lists", fetchLists);
  
  if(isLoading){
    return alert("로딩중")
  }
  
  if(isError){
    return alert("에러")
  }