reactjs - 如何在 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