The QueryArg
是一个泛型类型。
interface EndpointDefinitionWithQuery<
QueryArg,
BaseQuery extends BaseQueryFn,
ResultType
> {
query(arg: QueryArg): BaseQueryArg<BaseQuery>
}
See 源代码 https://github.com/reduxjs/redux-toolkit/blob/master/packages/toolkit/src/query/endpointDefinitions.ts#L56.
来自文档定义查询端点 https://redux-toolkit.js.org/rtk-query/usage/queries#defining-query-endpoints:
If the query
回调需要额外的数据来生成 URL,因此应将其编写为采用单个参数。如果需要传递多个参数,请将它们格式化为单个“选项对象”。
所以你可以声明泛型参数QueryArg
键入:builder.query
像这样的方法:
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
const baseUrl = 'xxxxxxx';
export const postsApi = createApi({
reducerPath: 'posts',
baseQuery: fetchBaseQuery({ baseUrl }),
endpoints: (builder) => ({
getPostsByYear: builder.query<any, { start: string; end: string }>({
query: (arg) => {
const { start, end } = arg;
console.log('arg: ', arg);
return {
url: 'posts/',
params: { start, end },
};
},
}),
}),
});
export const { useGetPostsByYearQuery } = postsApi;
并像这样传递查询参数:
import React from 'react';
import { useGetPostsByYearQuery } from './hooks';
export default function App() {
const { data, error, isLoading } = useGetPostsByYearQuery({ start: '2019', end: '2021' });
return <div>app</div>;
}
The log:
arg: { start: '2019', end: '2021' }
版本:"@reduxjs/toolkit": "^1.6.0"