RTK Query 清除缓存

小白

2023年06月26日 06:25· 阅读 2810

RTK Query 清除缓存

使用RTK Query的应该知道它有自己的一套缓存策略

RTK Query 的一个关键特性是它对缓存数据的管理。当从服务器获取数据时，RTK Query 将在 Redux 存储中以“缓存”的形式存储数据。当对相同数据执行附加请求时，RTK Query 将提供现有的缓存数据，而不是向服务器发送附加请求。

下面提供一些清除缓存的方法

refetchOnMountOrArgChange

接受布尔值或数字作为时间（以秒为单位）

传false（默认是false），将会根据缓存策略进行缓存
传 true，当组件挂载或者参数更改时，会重新获取数据
传递number时：如果缓存中存在现有查询，它将比较当前时间与该查询最后完成的时间，如果提供的时间过去了，将重新获取，如果没有过去，将提供现有的缓存数据

ts
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
import type { Post } from './types'

export const api = createApi({
  baseQuery: fetchBaseQuery({ baseUrl: '/' }),
  // global configuration for the api
  refetchOnMountOrArgChange: 30,
  endpoints: (builder) => ({
    getPosts: builder.query<Post[], number>({
      query: () => `posts`,
    }),
  }),
})

tsx
import { useGetPostsQuery } from './api'

const Component = () => {
  const { data } = useGetPostsQuery(
    { count: 5 },
    // this overrules the api definition setting,
    // forcing the query to always fetch when this component is mounted
    { refetchOnMountOrArgChange: true }
  )

  return <div>...</div>
}

使用 cache tag

这个也是比较常用到的一个清除缓存的方法

我们经常会比如在创建某个item时需要更新列表数据这个时候就可以用到 cache tag了

主要做两件事

给需要清除缓存的query API提供tag
在对应mutation接口请求成功后失效tag

ts
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query'
import type { Post, User } from './types'

const api = createApi({
  baseQuery: fetchBaseQuery({
    baseUrl: '/',
  }),
  tagTypes: ['Post', 'User'],
  endpoints: (build) => ({
    getPosts: build.query<Post[], void>({
      query: () => '/posts',
      providesTags: (result, error, arg) =>
        result
          ? [...result.map(({ id }) => ({ type: 'Post' as const, id })), 'Post']
          : ['Post'],
    }),
    getUsers: build.query<User[], void>({
      query: () => '/users',
      providesTags: ['User'],
    }),
    addPost: build.mutation<Post, Omit<Post, 'id'>>({
      query: (body) => ({
        url: 'post',
        method: 'POST',
        body,
      }),
      // 总是使与全局 tag 'Post' 相关的缓存失效 无法针对具体的 Post 进行精确的缓存失效。
      invalidatesTags: ['Post'],
    }),
    editPost: build.mutation<Post, Partial<Post> & Pick<Post, 'id'>>({
      query: (body) => ({
        url: `post/${body.id}`,
        method: 'POST',
        body,
      }),
      // 能够根据 mutation 的执行结果动态生成与 Post 相关的 tag，并使这些 tag 失效， 更加灵活和精确
      invalidatesTags: (result, error, arg) => [{ type: 'Post', id: arg.id }],
    }),
  }),
})

refetchOnFocus

控制RTK 查询在应用程序窗口重新获得焦点后是否尝试重新获取所有订阅的查询

如果在 skip: true 旁边指定此选项，则直到 skip 为 false 时才计算此值。

ts
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
import type { Post } from './types'

export const api = createApi({
  baseQuery: fetchBaseQuery({ baseUrl: '/' }),
  // global configuration for the api
  refetchOnReconnect: true,
  endpoints: (builder) => ({
    getPosts: builder.query<Post[], number>({
      query: () => `posts`,
    }),
  }),
})

ts
import { configureStore } from '@reduxjs/toolkit'
import { setupListeners } from '@reduxjs/toolkit/query'
import { api } from './services/api'

export const store = configureStore({
  reducer: {
    [api.reducerPath]: api.reducer,
  },
  middleware: (gDM) => gDM().concat(api.middleware),
})

// enable listener behavior for the store
setupListeners(store.dispatch)

export type RootState = ReturnType<typeof store.getState>

refetchOnReconnect

控制 RTK Query 在重新获得网络连接之后是否尝试重新获取所有订阅的查询

用法及注意事项与上相同

标签：

React Redux