리액트 쿼리 (6)

<이전까지의 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,
        retry: 1,
    });

    console.log("ddd", data);
    console.log("error", isError, error);
    return <div>ReactQueryPag</div>;
};

export default ReactQueryPage;

 

만약에 isLoading이 로딩중이면 return <h1>~ 에서 Loding... - 로딩 스피너를 보여준다.(보여주면 된다)

 

만약에 isError, 에러가 들어오면 return <h1> ~  -- 에러메시지(error.message)를 보여주면 된다.

 

그게 아닌 경우에는 (return <div>~)  [data]를 보여주면 된다.

 

 

 

data안에 data가 있다 - data.data

 

[data,data]는 일단 지워준다

 

로딩(Loding...표시가 나오고)하고

데이터(ddd)가 떳다

 

일부

item의 title을(만) 보여주겟다

 

<결과>

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 { isLoading, data, isError, error} = useQuery({
        queryKey : ["posts"],
        queryFn: fetchPost,
        retry: 1,
    });

    console.log("ddd", data);
    console.log("error", isError, error);

    if (isLoading) {
        return <h1>Loading...</h1>
    }
    if (isError) {
        return <h1>{error.message}</h1>
    }
    return <div></div>;
};

export default ReactQueryPage;

 

 

로딩이 살짝 떳다가 데이터가 (가운데에) 나온다.

 

근데..

data.data 좀 거슬리는데...그냥 data쓰면 안될까?

(data.data.map~ 말고 data.map~)

 

 

<해결>

ddd의 컬럼값을 data빼고 지울 수 있다. 지우기 보다는 data(유나-컬럼)만 뽑아올 수 있다.

이 api 호출이 성공을 하면 성공을 하고나서 return을 하기 전에 select로 와서 무엇을 선택하고 싶은지(data.data만 선택해서) return뒤에 있는 값을 return해준다!!

 

<실행결과>

에러가 난다!

 

이유는 

아직 data.data가 있기 때문

 

<해결>

data로 바꾼다

 

<결과>

data만 깔끔하게 나온다!!

 

 

<참고>

가장 초기 화면 (상단 일부)