form submit 이벤트가 발생했을 때 비동기 통신을 하기 위해 useQuery 관련 자료를 찾아봤다.
쿼리가 일정 주기마다 실행되도록 하여 서버와 실시간에 가까운 동기화를 제공한다. 쿼리에 대한 polling을 활성화 하려면 pollInterval 옵션얼 설정해준다.
const { loading, error, data } = useQuery(repoData, {
pollInterval: 500
});
const { loading, error, data, refetch } = useQuery(repoData, {
pollInterval: 500
});
Search.tsx
const { refetch } = useQuery(['musicSheets', filter, code, searchText],
() => getMusicSheetApi({searchType:filter, musicCode:code, search:searchText })
.then((res) => res.data)
const handleSubmit = (e: FormEvent) => {
e.preventDefault()
refetch()
}
...
return (
<form action='' onSubmit={handleSubmit}>
...
</form>
)
api
import { axios } from 'hooks/worker'
import { IMusicSheetRes } from 'types/index'
const MUSIC_BASE_URL = '서비스 url'
interface Params {
searchType: string
musicCode: string
search: string
}
export const getMusicSheetApi = (params: Params) =>
axios.get<IMusicSheetRes>(`${MUSIC_BASE_URL}`, {
params: {
...params,
},
})
아직 api 연동을 안해서 형태만 잡아 놓았다.
api 구축이 잘 되어 비동기 통신이 잘 이루어지면 좋겠다.