react-query query监听器

1、QueryObserver
	监听key对应的查询,返回查询状态等信息
	const observer = new QueryObserver(queryClient, {
		 queryKey:key,
		 其他配置内容和useQuery相同
	})
		
		
	const unsubscribe = observer.subscribe(result => {
 		console.log(result)
 		unsubscribe() 取消监听
	})

2、InfiniteQueryObserver
	监听无限查询
	 const observer = new InfiniteQueryObserver(queryClient, {
   	   queryKey: key,
	   queryFn: fetchPosts,
	   getNextPageParam: (lastPage, allPages) => ...,
	   getPreviousPageParam: (firstPage, allPages) => ...,
	   ...
	   其他配置对象和useInfiniteQuery相同
	 })

	 const unsubscribe = observer.subscribe(result => {
		console.log(result)
	   unsubscribe()
	 })

3、QueriesObserver
	监听动态并行查询
	 const observer = new QueriesObserver(queryClient, [
	   { queryKey: ['post', 1], queryFn: fetchPost },
	   { queryKey: ['post', 2], queryFn: fetchPost },
	 ],[{和useQuery相同的配置信息},{和useQuery相同的配置信息}])

	 const unsubscribe = observer.subscribe(result => {
	   console.log(result)
	   unsubscribe()
	 })

猜你喜欢

转载自blog.csdn.net/weixin_43294560/article/details/115054932
今日推荐