HELLICAT

React Query 공식 홈은 -> 여기다   TanStack Query

먼저 npm i @tanstack/react-query 을 해준다.

다음으로

index.tsx에 가서

import {QueryClient, QueryClinetProvider} form '@tanstack/react-query'

const queryClient = new QueryClient()

function App(){
	retrun (
     <QueryClientProvider client={queryClient}>
      <Todos />
    </QueryClientProvider>
  )
}

작업을 해준다.

Api가 있는 template 파일의 문장을 토대로 스크립트 파일을 하나 만든다

// api.ts

export const functionName = async()=>{
	return fetch('').then((response)=>response.json())
}

후에

Api가 있는 template 파일로가서 useEffect가 있는 문장을 없애주고

import {api} from './api.ts'
import {useQuery} from '@tanstack/react-query'


export default FunctionName (){
	const {isLoading, data} = useQuery(['keyName'], functionApi)
    // 비동기 방법
    const {isLoading, data} = useQuery(['keyName'], async () => {
    	const data = await functionApi
        return data
        },
        //5초마다 refetch
        {
        	refetchInterval:5000;
         }
        )
	return(
    <div>
    {isLoading ? <span> loading </span> : data.map()//문장 구성}
    </div>
    )
}