React-Query && Axios

1. React-Query

• 1) React-Query Provider

  import { QueryClient, QueryClientProvider } from "react-query";
  import { ReactQueryDevtools } from "react-query/devtools";
  
  const queryClient = new QueryClient();
  
  
    <QueryClientProvider client={queryClient}>
        <App />
        <ReactQueryDevtools initialIsOpen={true} />
    </QueryClientProvider>
  

• 2) React-Query

  const { isLoading, data } = useQuery(["key"], API, Option) 

• 3) React-Query Option

  onSuccess(() => void)
  - onSuccess 는 쿼리 성공 시 실행되는 함수이다.
  - 매개변수 data는 성공 시 서버에서 넘어오는 response 값이다.

2. Axios

import axios from "axios";

export const API = async () => {
  const { data } = await axios.get(API주소);
  return data;
};

3. React-Query useQuery

  const { isLoading, data } = useQuery(
    ["info", coinId],
    () => API(),
    {
      refetchInterval: 5000, --> /* option ms */
    }
  );

4. React-Query && Axios

import axios from "axios";

export const menuList = async () => {
  try {
    const { data } = await axios.get(`url`);
    return data;
  } catch (err) {
    console.error(err);
  }
};