[ReactNative_Study_9]React_query

1) Reat_query

https://react-query.tanstack.com/overview

Overview

사용법

1) App.js 에 가서 queryClient 를 만든다음에 사용하는 컴포넌트 전체를 QueryClientProvider 로 감싸준다.

import { QueryClient, QueryClientProvider, useQuery } from 'react-query' 
const queryClient = new QueryClient() 

export default function App() {
  return (
  <QueryClientProvider client={queryClient}>
        <Example />
  </QueryClientProvider>
  )
}

 

2) 데이터를 불러올 때

const { isLoading, error, data } = useQuery('repoData', 
() => fetch('https://api.github.com/repos/tannerlinsley/reactquery').then(res => res.json()))

 

userQuery라는 hook을 사용하며, isLoading , error , data 를 받아온다 ( 이 이름은 바뀌면 안됨) 'repoData'는 key이고 뒤에는 fetch를 하는 함수 형태가 온다.

 

cf) 상위 navigator에서 unmountOnBlur:true, 옵션을 적용하면 메모리를 최적화 하기위해서 해당 화면 (TabNavigator) 가 넘어가면 메모리에서 data를 지우게 된다. 이 때 useQuery를 쓰지않고 일반적인으로 data를 받아오기 위한 loading state / fetch 함수 등을 쓰면 매번 화면에 돌아올 때 마다 데이터를 다시 받게 된다 . 
그러나 useQuery를 쓰면 data가 cached 되어 있다. 즉, data를 보관하기 위해서 별도로 작성하지 않아도 한번 fetch한 data는 날라가지 않고 보관된다. 이를 가능하게 해주는 것이 'repoDdata'라고 쓰여져 있는 부분의 key이다. key 이름으로 React query Cached 시스템에 저장되어 있기 때문에 동일한 key를 가지면 다시 fetch하지 않는 것이다.

 

이를 장점으로 예를 들어 userProfile을 가져오는 함수를 사용한다면 이를 한번만 가지고 와서 key에다가 저장해놓으면 동일한 key를 사용하면 여러번 fetch를 할 필요가 없다. 또한 fetch를 여러번 하면 api 호출을 여러번해야 하므로 유료 api 일 경우 드는 비용을 절약할 수 있게 해준다. 

 

 

 

3) useQuery 사용

https://react-query.tanstack.com/reference/useQuery

useQuery

ueQuery 자체에는 다양한 값을 받아 올 수 있음. 링크 참조 

 

4) QueryClinet 

--> 위에서 받아온 data를 key에 넣어서 cached 할 떄, 모든 데이터를 관장하는 것을 queryClient이며 특정 key 저장시에 string 또는 array 형태로 저장시켜, 카테고리로 구분 할 수도 있다. 

 

ex) ["todos" , "goMountatin"]

     ["todos" , "goSchool"]   

// 이는 각각의 항목은 goMountain / go SChool 이지만 'todos'라는 항목으로 카테고리하여 저장한 것과 같다. 

// 이때 queryClint는 key로 저장되어 있는 값들을 현재 페이지에서 refecting 하거나 다른 스크린에서 불러올 수 있다. 

// 위에서 'todos' 이름이 들어간 data를 refecthing 함.
 
 const queryClient=useQueryClient();
 // refetch all active queries partially matching a query key:
 await queryClient.refetchQueries(['todos'])

https://react-query.tanstack.com/reference/QueryClient

QueryClient