Home [JavaScript] array.splice(), RTK Query 자동 리패칭
Post
Cancel

[JavaScript] array.splice(), RTK Query 자동 리패칭

Array.prototype.splice()

  • array.splice(*start*[, *deleteCount*[, *item1*[, *item2*[, *...*]]]])
  • 위 처럼 사용
  • deleteCount를 입력하지 않거나 전체 배열의 길이보다 더 크면 배열 안의 모든 데이터 삭제
1
2
3
4
5
6
7
8
9
10
const months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');
// inserts at index 1
console.log(months);
// expected output: Array ["Jan", "Feb", "March", "April", "June"]

months.splice(4, 1, 'May');
// replaces 1 element at index 4
console.log(months);
// expected output: Array ["Jan", "Feb", "March", "April", "May"]

RTK Query 자동 리패칭

들어가기

  • RTK Query를 사용하면서 새로운 데이터를 추가 했을 때 캐시되어 있는 테이블의 데이터를 업데이트 시키고 싶었다.
  • 이런 기능을 RTK Query에서 아주 간단하게 사용할 수 있도록 제공하고 있었다.

방법

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query'
import type { Post } from './types'

const api = createApi({
  baseQuery: fetchBaseQuery({
    baseUrl: '/',
  }),
  tagTypes: ['Post', 'User'],
  endpoints: (build) => ({
    getPosts: build.query<Post[], void>({
      query: () => '/posts',
      providesTags: ['Post'],

    }),
    addPost: build.mutation<Post, Omit<Post, 'id'>>({
      query: (body) => ({
        url: 'post',
        method: 'POST',
        body,
      }),
      invalidatesTags: ['Post'],
    }),
  }),
})
  • 위 코드를 보면 createApi 부분에서 tagType이라는 메서드로 태그를 관리할 수있다.
  • Query에는 providesTags를 추가해서 해당 태그에 연결 시킨다. (구독!)
  • Mutation에는 invalidatesTags에 해당 태그를 연결 시킨다. (역시 구독!)

  • Query는 데이터를 읽어올 때 (api의 get에 주로 사용)
  • Mutation은 데이터를 업데이트, 추가할 때 (api의 post나 fetch에 주로 사용) 사용한다.

  • 이렇게 연결했을 때 Mutation이 성공하면
  • 자동으로 Query는 다시 리패칭을 실행하여 새로운 값을 받아온다.
  • 기존에 받았던 값을 캐시하여 API 요청 부담을 줄여주고,
  • 필요할 때 API에 요청하여 새로운 값을 받아올 수 있는 것이다.

Reference

This post is licensed under CC BY 4.0 by the author.