react query example

import React, { useEffect, useState } from "react"
import { useMutation, useQuery } from "react-query"
import { Apis } from "./apis/api"

function App() {
  const [textState, setTextState] = useState("");

  const Texthandler = (event) => {
    setTextState(event.target.value)
  }

  const { error, data, isLoading, isError } = useQuery({
    queryKey: ["posts"],
    queryFn: () => Apis.readposts()
  })

  const postMutation = useMutation({
    mutationFn: (body) => Apis.createPost(body)
  })

  if(isLoading) return <div>...loading</div>

  if(isError) return <div>에러!</div>

  return (
    <div className="App">
      <div>
        <input type="text" onChange={Texthandler}/>
        <button type="button" onClick={() => postMutation.mutate({ userId:1, title:"mock", body: textState})}>제출!</button>
      </div>
      <div>
        <h1>포스트 목록!</h1>
        {data.map(each => 
          <div key={each.id}>
            <h2>{each.title}</h2>
            <p>{each.userId}</p>
            <div>{each.body}</div>
          </div>)}
      </div>
    </div>
  )
}

export default App