reactjs - React asynchronously set data from api in context provider

Question

I am trying to set data from a graphql api, into a context provider wrapping my entire application. I have 2 calls to separate apis and I use that data in setting the provider. This is very challenging for me and I can find very little information online about it. This is what I have so far, it works but there is bugs when changing state values and sometimes the entire app reloads.

const App = () => {
  const [userRoles, setUserRoles] = useState([]);
  const [profileId, setProfileId] = useState(
    !getItem('profileId') ? null : getItem('profileId').toString()
  );

  const history = useHistory();

  const { isLoading, user, error } = useAuth0();
  const { data, loading: profilesLoading, error: searchProfilesError } = useQuery(
    SEARCH_PROFILE
  );

  useEffect(() => {
    if (!isLoading && !error) {
      // eslint-disable-next-line no-prototype-builtins
      const i = Object.entries(user).filter(([, value]) => value.hasOwnProperty('roles'));

      setUserRoles(i?.[0]?.[1]?.roles);
    }
  }, [user]);

  useEffect(() => {
    if (!profilesLoading && !searchProfilesError) {
      if (!userRoles.includes('SuperUser')) {
        setProfileId(data?.searchProfile?.items?.[0]?.id);
        setLocalProfile(data?.searchProfile?.items?.[0]?.id);
      }
    }
  }, [userRoles, data]);

  const handleChangeProfile = id => {
    setProfileId(id);
    setLocalStorageProfile(id);
  };

  if (isLoading || profilesLoading) return <Loading />;

  if (error)
    return (
      <Alert />
    );

  return (
    <UserProvider
      email={user?.email}
      roles={userRoles}
      setSelectedProfile={handleChangeProfile}
      profileId={profileId}
    >
      // Routes
    </UserProvider>
  );
};

The app is fairly large and I have included the important parts. If you need any more info let me know.

The way I've been doing it so far works but it is very buggy and sometimes re renders the entire app Im not sure why. Should i be using useReducer? Also the profile can be changed when calling handleChangeProfile from within the components of the provider.

Answer 1

等待大神解答