RTK Query无单篇文章接口时如何从列表接口返回值中取指定文章

实现方案 #

方案1：单独封装单篇文章查询Endpoint #

你可以新增一个单篇查询的endpoint，transformResponse 支持传入第三个参数arg，就是你调用查询时传入的参数，直接用来做筛选即可：

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

// 假设你的ArticleDTO结构如下，可根据实际业务修改
interface ArticleDTO {
  id: string
  title: string
  content: string
  // 其他字段
}

export const articleApi = createApi({
  reducerPath: 'articleApi',
  baseQuery: fetchBaseQuery({ baseUrl: '/' }),
  endpoints: (builder) => ({
    getArticles: builder.query<{ data: ArticleDTO[] }, null>({
      query: () => "/api/v1/articles",
      providesTags: ['Article']
    }),
    // 新增单篇文章查询
    getArticleById: builder.query<ArticleDTO | undefined, string>({
      query: () => "/api/v1/articles",
      // 第三个参数arg就是调用时传入的文章id
      transformResponse: (rawRes: { data: ArticleDTO[] }, meta, arg) => {
        return rawRes.data.find(article => article.id === arg)
      }
    })
  })
})

// 导出自动生成的hooks
export const { useGetArticlesQuery, useGetArticleByIdQuery } = articleApi

使用的时候直接传入文章id即可：

// 组件内使用
const { data: article, isLoading } = useGetArticleByIdQuery('你的文章id')

方案2：复用现有列表接口缓存，直接筛选（更推荐） #

如果你已经在项目其他地方调用过getArticles拉过全量列表，完全可以复用现有缓存，不需要新增endpoint，也不会重复发请求，直接在调用时通过selectFromResult配置筛选即可：

// 组件内使用，targetArticleId为你要查询的文章id
const { data: article, isLoading } = useGetArticlesQuery(null, {
  selectFromResult: ({ data, isLoading, error }) => ({
    isLoading,
    error,
    article: data?.data.find(item => item.id === targetArticleId)
  })
})

这个方案性能更好，不会产生多余的接口请求，适合绝大多数场景。

内容的提问来源于stack exchange，提问作者Mathis