如何使用Redux Toolkit RTK Query将查询参数传递给API?
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({
query: (start, end) => { // Why is 'end' always undefined???
return {
url: 'posts/',
params: { start, end },
};
},
}),
getPosts: builder.query({
query: () => 'posts/',
}),
getPostByID: builder.query({
query: (name) => `posts/${name}`,
}),
}),
});
export const { useGetPostsQuery, useGetPostsByYearQuery, useGetPostByIDQuery } = postsApi;
当尝试从组件传递参数时,似乎只能识别start
值。year
由<PostOptions/>
组件中的select元素更新。它使用useState
钩子。值正确更新,并调用useGetPostsByYearQuery
,但end
参数始终未定义。因此,看起来我没有正确定义API端点。有什么建议吗?我想要它做的就是发送一个http://xxx/posts?start=start&end=end
的请求。
我甚至尝试过为end
参数硬编码一个字符串值,例如useGetPostsByYearQuery(year, '2019')
,但是在API回调中它仍然显示为undefined
,所以我遗漏了一些更基本的东西。
const Post = () => {
const year = useSelector((state) => state.postOptions.year);
const yearPlusOne = parseInt(year, 10) + 1;
const { data, error, isLoading } = useGetPostsByYearQuery(year, yearPlusOne);
return (
<SafeAreaView style={styles.container}>
<View style={styles.content}>
<PostHeading />
<PostOptions></PostOptions>
</View>
</SafeAreaView>
);
};
export default Post;
1条答案
按热度按时间jgzswidk1#
QueryArg
是泛型类型。参见源代码。
从定义查询端点的文档:
如果
query
回调函数需要额外的数据来生成URL,那么它应该被写成只带一个参数。如果你需要传入多个参数,那么就把它们格式化为一个"选项对象"。因此,您可以像这样为
builder.query
方法声明泛型参数QueryArg
类型:并像这样传递查询参数:
日志:
版本:
"@reduxjs/toolkit": "^1.6.0"