RTK Query - use어쩌구Query

#데이터를 가져오는 방법 #query를 날리는 표준화된 방법 #CRUD

use어쩌구Query를 사용하여 데이터를 읽어오는 과정을 살펴보자.

STEP1. 기본형태

// apiSlice.js

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'

export const apiSlice = createApi({

    baseQuery: fetchBaseQuery({ baseUrl: 'http://localhost:8000' }),

    endpoints: builder.query({

        // 전체 불러오기 : Read(List)

        getTodos: builder.query({

            query: () => '/todos',        

        }),

    })

})

//어디서든 쓸 수 있게 훅(Hook)으로 준비!

export const { 

    useGetTodosQuery,

} = apiSlice  

---

STEP2. RTK Query를 쓸 수 있는 분위기 만들기 #초기 환경 설정

// index.js

import { ApiProvider } from "@reduxjs/toolkit/query/react";

import { apiSlice } from 

ReactDom.createRoot(document.getElementById('root'))

    .render(

        <ApiProvider api={apiSlice}>

            <MyCompoent />

        </ApiProvider>

);

---

STEP3. 실제로 데이터 읽어오기 #use어쩌구Query() #at 원하는 컴포넌트

// TodoList.js

import { useGetTodosQuery } from './apiSlice.js'

const TodoList = () => {

    const {

        data: todos,

        isLoading, // 처음 읽을 때

        isFetching, //  그 이후부터 읽을 때

        isError,

        error

    } = useGetTodosQuery()

    

    if (isLoading) {

        // 로딩상태에서 하고 싶은 일

        content = <p>로딩 중...</p>

    } else if (isSuccess) {

        // 데이터를 잘 가져오면 하고 싶은 일

        content = JSON.stringify(todos)

    } else if (isError) {

        // 에러가 났을 때 하고 싶은 일

        content = <p>{ error }</p>

    }

    return (

        <>

            { content }

        </>

    )

}

---

참고자료

공식문서 : https://redux-toolkit.js.org/rtk-query/overview

생활코딩 : https://www.youtube.com/watch?v=pnpO3o8mLBU

Dave Gray : https://youtu.be/HyZzCHgG3AY?feature=shared