如何通过flag刷新RTK Query数据？创建新文章后遇skip报错

问题情况 #

用Redux Toolkit的RTK Query做数据获取，正常请求没问题，但每次新增文章后，文章列表没法自动更新。查了文档想靠skip或者refetchOnMountOrArgChange来解决，写了这段代码：

const { data } = useGetArticlesQuery({}, { skip: true })

还加了状态控制skip：

const [skip, setSkip] = useState(false)

结果把skip设为true的时候，直接报undefined错误。

解决办法 #

先搞定skip导致的undefined问题 #

当skip设为true时，RTK Query根本不会发请求，data自然是undefined，所以用data之前必须做空值判断：

const { data } = useGetArticlesQuery({}, { skip })

// 先判断有没有数据，再往下走
if (!data) {
  return <div>加载中或者暂无数据</div>
}
// 之后正常渲染列表就行

更省心的列表更新方式：让RTK自动重取 #

其实没必要用skip手动折腾，RTK Query本身就有缓存失效自动重取的功能，刚好适配新增文章后更新列表的场景：

方法一：用标签失效自动触发

定义createApi的时候，给查询接口加个标签，然后新增文章的mutation标记这个标签失效，新增成功后自动刷新列表：

const api = createApi({
  reducerPath: 'api',
  baseQuery: fetchBaseQuery({ baseUrl: '/api' }),
  tagTypes: ['Articles'], // 先定义标签类型
  endpoints: (builder) => ({
    getArticles: builder.query({
      query: () => '/articles',
      providesTags: ['Articles'], // 这个查询关联Articles标签
    }),
    createArticle: builder.mutation({
      query: (newArticle) => ({
        url: '/articles',
        method: 'POST',
        body: newArticle,
      }),
      invalidatesTags: ['Articles'], // 新增成功后让Articles标签失效，自动重取列表
    }),
  }),
})

这样每次调用createArticle成功后，useGetArticlesQuery会自动拉最新的文章列表，完全不用手动管skip。

方法二：手动调用重取函数

要是就想手动控制刷新时机，可以直接用refetch：

const { data, refetch } = useGetArticlesQuery({}, { skip: false })

// 新增文章成功后调用refetch就行
const handleAddArticle = async (newArticle) => {
  await createArticle(newArticle)
  refetch() // 手动触发列表重取
}

要是非得用skip的正确姿势 #

如果确实需要用skip，除了做空值判断，也可以给data整个默认值避免undefined：

const [skip, setSkip] = useState(false)
const { data } = useGetArticlesQuery({}, { skip })

// 给data设个默认空数组
const articles = data ?? []

内容的提问来源于stack exchange，提问作者le za a