当我移动下一页或移动到另一个页面或更新数据时...数据不重新获取...当我重新加载页面然后重新获取数据...无需重新加载如何使用 RTK 查询重新获取数据..
这是代码
export const userService = createApi({
reducerPath: 'userService',
baseQuery: fetchBaseQuery({ baseUrl: 'http://localhost:5000/api/user/' }),
tagTypes: ["Userdetail",'Profile_update'],
endpoints: (builder) => ({
getuserdetails: builder.query({
query: () => ({
url: 'userdetails',
// method: 'GET',
headers: {
'Content-type': 'application/json',
'auth-token': localStorage.getItem('loginToken')
}
}),
providesTags : ['Userdetail']
}),
updateuserdetail: builder.mutation({
query: (newbody) => {
const {id,...data} = newbody
return{
url: `profile_update/${id}`,
method: 'PUT',
body: data,
headers: {
'Content-type': 'application/json',
'auth-token': localStorage.getItem('loginToken')
}
}
},
invalidatesTags :['Profile_update']
}),
})
})
在渲染任何内容时调用 useGetuserdetailsQuery 每个组件
function ProtectedRouter(props) {
const responseinfo = useGetuserdetailsQuery({},{ refetchOnMountOrArgChange: true })
const navigate = useNavigate()
const { Component } = props
const login = localStorage.getItem('loginToken')
console.log(responseinfo)
useEffect(() => {
console.log('useeefect working')
if (responseinfo.data) {
if (responseinfo.data.errormsg) {
if (responseinfo.data.errormsg.name === 'TokenExpiredError') {
localStorage.removeItem('loginToken')
navigate('/login',{state:{'logoutmsg':responseinfo.data.errormsg}})
navigate(0)
}
}
}
})
return (
<>
{login? <Component /> : <Navigate to='/login' />}
</>
)
}
最佳答案
在使用 useGetuserdetailsQuery 获取数据的页面中，使用此 refetchOnMountOrArgChange: true。当组件挂载或其参数更新时，它将重新获取数据。
useGetuserdetailsQuery({}, { refetchOnMountOrArgChange: true })
此文档将对您有所帮助 https://redux-toolkit.js.org/rtk-query/api/createApi
关于reactjs - 如何在 RTK 查询中自动重新获取数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/72447522/