RTK Query 기본

import { useGetPokemonByNameQuery } from './services/pokemon'
import React from 'react'
import {api} from '../src/api';

const Count = ({name}) => {

  //use-Query는 읽기전용
  //use-Query는 객체를 Return

  //use-Mutation은 쓰기전용
  //배열을 return
  //첫번째 원소 함수로 수동 실행해야함.
  //첫번째 원소 함수는 promise로 응답값 전달
  //두번 째 원소 객체의 isLoading

  const query = api.useGetCountQuery({name});
  const mutation = api.useSetCountMutation();
  const setCount = mutation[0];
  if(query.isLoading) {
    return <>Loading</>
  }

return (
<div>
  <button
    onClick={async () =>{
      const result = await setCount({name, value : query.data + 1})
    }
    }>
      {mutation[1].isLoading ? "updating" :? ""}
      {query.isFetching ? "fetching..." : ""}
      {name} {query.data}
    </button>
  </div>
)
}




export default function App() {
  const { data, error, isLoading } = useGetPokemonByNameQuery('bulbasaur')

  return (
    <div className="App">
      {error ? (
        <>Oh no, there was an error</>
      ) : isLoading ? (
        <>Loading...</>
      ) : data ? (
        <>
          <h3>{data.species.name}</h3>
          <img src={data.sprites.front_shiny} alt={data.species.name} />
        </>
      ) : null}
    </div>
  )
}