如何在RTK查询中自动重取数据

Question

当我移动下一页或移动到另一页或更新数据…数据不能重取…当我重新加载页面然后重新获取数据…如何使用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' />}

</>
)
}

Answer 1

在使用useGetuserdetailsQuery获取数据的页面中，使用此refetchOnMountOrArgChange: true。当组件挂载或其参数更新时，它将重新获取数据。

useGetuserdetailsQuery({}, { refetchOnMountOrArgChange: true })

这个文档将对你有帮助https://redux-toolkit.js.org/rtk-query/api/createApi

Answer 2

不要在query中使用localStorage.getItem('loginToken')，而是将其作为参数传递。如果参数不变，RTK Query将保持缓存值，如果参数改变，它将做一个新的请求。

Answer 3

您的providesTags在查询

providesTags : ['Userdetail']

与invalidatesTags突变不匹配。

invalidatesTags :['Profile_update']

这就是RTK不自动重新抓取的原因。

providesTags将为查询添加一个标记。在您的情况下，useGetuserdetailsQuery被标记为"userdetail"。现在，无论何时进行突变，都必须告诉这个突变，您希望重新获取哪个查询。可以用invalidatesTags属性来表示。如果你有这个

invalidatesTags :['Userdetail']

在useUpdateUserDetail突变运行后，该突变将找到带有'Userdetail'标签名称的查询，它将再次运行该查询，以便您的状态和服务器同步。

Answer 4

这对我很有用。

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
const api = createApi({
baseQuery: fetchBaseQuery({ baseUrl: '/' }),
endpoints: (build) => ({
getPost: build.query({
query: () => 'post',
keepUnusedDataFor: 0,
}),
}),
})

https://redux-toolkit.js.org/rtk-query/api/createApi keepunuseddatafor