리액트 쿼리 (5)

우리가 받는 값이 데이터 뿐일까...?

react query는 서버 상태(state)를 겨냥해서 나왓다.

서버 사용할 때 쓴 state는? 

바로!

1. isLoading~

처음에는 undefined. 왜냐하면 isLoading중, 아직 data를 가져오지 않았기때문

(true) 갖고오는 중이야!

그리고 나서 data가 도착했다. 그러면 false로 바뀐다. 

isLoading값이 알아서 (수동으로 안해도 )자동으로 true,false가 된다!

 

4

 

 

여기서 알수있는것!

1. useQuery는 컴포넌트 시작할 때 실행된다! (useQuery는 바로 실행이 되는구나. 컴포넌트(const ReactQueryPage~)에 돌아오자마자, 컴포넌트가 시작 되자마자 const { } = useQuery { queryKey~ queryFn~}(이게)가 실행되는 구나!

(물론) 나는 컴포넌트 들어오자마자 실행 안하고 싶은데? 나는 버튼 클릭할 때 시작해주고 싶은데?

그(런)것도 설정 가능(설정해줄 수 잇다) ! -> 그건 나중에~

 

( isLoading외에 ) 또 우리 서버상태 뭐가 잇어?

isLoading만 있어?

error났을때!

 isError!!!

 

우리가 error 상황도 받아올 수 잇다. (const~ isError , error)

에러가 났다는 메시지를 error 객체도 넘겨준다(보여준다).

 

console.log("error" , isError, error) = isError가 있으면 error객체를 보여달라!

 

일단은 우리가 에러 상황을 만들어야 하잖아?

url의 ~posts를 post로 바꾼다.

 

 

<결과>

<ReactQueryPage.js> 원본

import { useQuery } from "@tanstack/react-query";
import React from "react";
import axios from "axios";

const ReactQueryPage = () => {

    const fetchPost = () => {
        return axios.get("http://localhost:3004/posts");
    };
    const { data } = useQuery({
        queryKey : ["posts"],
        queryFn: fetchPost,
    });
    console.log("ddd", data, isLoading);
    return <div>ReactQueryPag</div>;
};

export default ReactQueryPage;

 

<ReactQueryPage.js - 실행 바로 전최종 수정본>

import { useQuery } from "@tanstack/react-query";
import React from "react";
import axios from "axios";

const ReactQueryPage = () => {
    const fetchPost = () => {
        return axios.get("http://localhost:3004/post");
    };
    const { isLoading, data, isError, error } = useQuery({
        queryKey : ["posts"],
        queryFn: fetchPost,
    });
    console.log("ddd", data, isLoading);
    console.log("error", isError, error);
    return <div>ReactQueryPag</div>;
};

export default ReactQueryPage;

 

초기화면 (상단일부)

 

클릭하면

 

처음에는 데이터가 없고 로딩을 가지고 오기를 시도하고 있는중(true)

error~ = 가지고 오는 중이니까 error도 없다

 

http:~~ = API 호출을 했는데...

뭔가 실패를 함!

 

API 호출 시도를 3번을 더한다.!

총 4번

 

4번을 하고 나니까 로딩이 false로 바뀜. - 나 이제 그만할게 . 로딩 그만할래. 하면서 로딩이 false로 바뀌고 데이터는 없고

 

error true  = error를 받았다.

 

message ~ = 에러가 무슨 내용인지 알 수 있다!

 

여기서 알 수 있는건....

1. 내가 isError와 error를 통해서 에러가 왔는지, 에러메시지는 뭔지 알 수 있다.

2. API 호출 시도를 3번을 더 한다.(처음 한번은 원래 하는거지만)

 

리액트 쿼리에서 또다른 기능을 제공해준다.

바로.... retry!!!

API 호출을 처음에 실패를 해도 "실패할 수도 있지" , 몇 번더 시도할 수 있는 retry라는 기능을 넣어준것!

( 리덕스(Redux)에는 없다.)

따라서 API 호출을 실패를 해도 몇번을 더 시도할지 재시도 횟수를 지정해 줄 수 있다.

 

기본 재시도 횟수는 3번!

한번은 내가 원래 호출해야 되는 거고, 이게 실패할 경우 3번을 더 시도한다!

그래서 내가 총 4회(4번)의 API 호출을 보게 된 것!

 

만약 (굳이) 3번 말고 한번만 해도 될것 같은데?

그럼 정해줄 수 있다!

 

retry : 1 , (추가)

 

<결과>

 

한번은 원래 try했어야 하는 거고  두번째 try하고 끝나게 된다!

 

이런식으로 내가 몇번을 재시도 할지도 내가 정해줄 수 있다~~~!!!!