如何在 RTK 查询中自动重新获取数据答案

【问题标题】：how to Automated Re-fetching data in RTK query如何在 RTK 查询中自动重新获取数据
【发布时间】：2022-12-15 12:49:32
【问题描述】：

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

})

叫我 Getuserdetails 在渲染无效时查询每个组件

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' />}
        
        </>
    )
}

【问题讨论】：

试试refetchOnMountOrArgChange: true 或者。 refetchOnMountOrArgChange: <number in sec (After how much seconds it has to refetch)>

标签： reactjs redux-toolkit rtk-query

【解决方案1】：

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

useGetuserdetailsQuery({}, { refetchOnMountOrArgChange: true })

本文档将对您有所帮助 https://redux-toolkit.js.org/rtk-query/api/createApi

【讨论】：

抱歉，它会自动更正，但我说不起作用
你试过用数字吗？

【解决方案2】：

不要在 query 中使用 localStorage.getItem('loginToken')，而是将其作为参数传入。如果参数保持不变，RTK 查询将保留缓存值，如果参数更改，它将执行新请求。

【讨论】：

【解决方案3】：

你的providesTags在查询

 providesTags : ['Userdetail']

和 invalidatesTags 突变不匹配。

invalidatesTags :['Profile_update']

这就是为什么 rtk 不会自动重新获取的原因。

providesTags 将为查询添加一个标签。在您的情况下，useGetuserdetailsQuery 被标记为“Userdetail”。现在，无论何时进行突变，都必须告诉该突变，您希望它重新获取哪个查询。你用 invalidatesTags 属性告诉这个。如果你有这个

invalidatesTags :['Userdetail']

useUpdateUserDetail mutation 运行后，这个 mutation 会找到带有“Userdetail”标签名称的查询，它会再次运行那个查询，这样你的状态和服务器就同步了。

【讨论】：