In the root of my app I need to make calls to an api when the app loads and use that data in the provider.
const App = () => {
const [userRoles] = useState(['SuperUser']);
const [selectedProfileId, setSelectedProfileId] = useState(null);
const { isLoading, user, error } = useAuth0();
const { data, loading: profileLoading, error: profileError } = useQuery(
GET_PROFILES
);
useEffect(() => {
setProfileId(data?.items?.[0]?.id);
}, [data]);
if (isLoading || profileLoading) return <Loading />;
if (error)
return (
<Alert />
);
if (searchCustomersError) {
return (
<Alert />
);
}
// const getUserRole = () => {return role} ??? How can I call this in the roles prop in the provider?
return (
<ProfileProvider
id={1}
name={user?.name}
roles={userRoles}
setSelectedProfile={handleProfielChange}
selectedProfileId={selectedProfileId}
>
... App routes
</ProfileProvider>
);
};
The problem is that selectedProfileId is null initially and my app uses that null value in the provider for some reason then once it gets the data it gives the provider the proper value. I dont get it because if the profileLoading value is true then the Provider shouldnt render right?
Also, I need to have a function that sets the roles variable right now I have it static but I need to adjust the the user data I get from user Auth0 to get the userRole var. How can I do this?
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…