[6/2 TIL] useQuery 사용하기

kind J·2022년 6월 2일
0
post-thumbnail

form submit 이벤트가 발생했을 때 비동기 통신을 하기 위해 useQuery 관련 자료를 찾아봤다.

1. polling 방식

쿼리가 일정 주기마다 실행되도록 하여 서버와 실시간에 가까운 동기화를 제공한다. 쿼리에 대한 polling을 활성화 하려면 pollInterval 옵션얼 설정해준다.

const { loading, error, data } = useQuery(repoData, {
	pollInterval: 500                                          
});

refetching 방식

  • polling 방식처럼 일정 간격으로 update 를 하지 않고 특정 사용자의 액션에 대한 응답으로 쿼리 결과를 refetch 해준다.
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 구축이 잘 되어 비동기 통신이 잘 이루어지면 좋겠다.

profile
프론트앤드 개발자로 일하고 있는 kind J 입니다.

0개의 댓글