如何通过Redux Toolkit RTK Query从服务器获取5条而非20条数据？

RickAndMorty API支持通过limit查询参数控制单页返回的数据条数，你只需要在RTK Query的接口定义中添加该参数即可获取5条数据，具体修改如下：

修改后的API定义代码 #

export const rickandmortyApi = createApi({
    reducerPath: 'rickandmorty/api',
    baseQuery: fetchBaseQuery({ baseUrl: 'https://rickandmortyapi.com/api/' }),
    endpoints: (builder) => ({
        searchCharacter: builder.query<ServerResponse, { page?: number; limit?: number }>({
            // 新增limit参数并设默认值为5，保留page参数默认值1
            query: ({ page = 1, limit = 5 }) =>  `character?page=${page}&limit=${limit}`
        }),
    }),
})

export const {useSearchCharacterQuery} = rickandmortyApi

使用方式 #

• 默认获取第1页的5条数据：

  const { data } = useSearchCharacterQuery({})
  

• 指定页码和条数（比如第2页的5条数据）：

  const { data } = useSearchCharacterQuery({ page: 2, limit: 5 })
  

补充说明 #

• 将原有的any类型替换为包含page和limit的对象类型，提升类型检查严谨性；
• limit参数默认值设为5，确保接口调用默认返回5条数据；
• 接口响应会同步返回总数据量、分页标识等完整信息，不影响后续分页逻辑。

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