Using "auth0-spa-js” with “auth0-react”

Help
,
1

I am using React Router v6 with Apollo and I want to take advantage of the data prefetching that the Router provides (see loader v6.26.2 | React Router. This has come with some challenges since both Apollo and the React auth0 SDK use hooks which means they cannot be used outside of React components.

My providers currently look like this:

I am able to circumvent this with Apollo using an instantiated client however Apollo is coupled with the auth provider since it uses id’s in both the requests parameters and in the auth headers.

export default function ApolloProviderWithAuth({
  children,
}: {
  children: React.ReactNode;
}) {
 //  Hook called inside the provider
  const { getAccessToken } = useAuthContext();

// Client instantiated inside the provider
  const client = createApolloClient({ getAccessToken }); 


  return <Provider client={client}>{children}</Provider>;
}

It seems like there isn’t a way to access the Id’s in the React SDK without doing so inside of some form of a functional component so my question is "is it ok to use auth0-spa-js in tandem with auth0-react so that I can access the IDs I need outside of hooks? Does anyone have a solution for me since the react router prefetching will be very beneficial down the track.