I have a library that exposes a React hook - usePlayground. This can only be called within the context of a function, and, when called, returns and object like this:

// object with circular references
const playground = {
  getUserDetails: () => new Promise({userId: '1234'}),
  apiKey: '1234',
}

I have a component, UserDetails that looks like this.

UserDetails.jsx

import {usePlayground} from 'my-providers';

function useUserData() {
  const playground = usePlayground();

  const userData = fetchUserData(playground);

  return [{
    apiKey: userData.apiKey,
    userId: userData.userId
  }]
}

function UserDetails() {
  const [{userId, apiKey}] = useUserData();

  const [{licenses}] = useLicenses(userId, apiKey);
  const [{todos}] = useTodos(userId, apiKey)

  return <div></div>
}

I have a react query service that should calculate the user ID and apiKey to pass to the consumer. I get a JSON circular reference detected from my devtools. I've also read that you aren't supposed to use an object like this as an argument to React query.

user-service.js

async function fetchUser(playground) {
  const userDetails = await playground.getUserDetails()
  return {
    apiKey: userDetails.apiKey,
    userId: userDetails.userId
  };
}

// this throws an error because playground object has circular references
export async function fetchUserData(playground) {
  return useQuery(['user', playground], fetchUser);
}

I would like to compute the apiKey and the userId once and access automatically in all of my react query hooks using dependent queries, but I am gettin the "JSON circular reference" error. How can I compute apiKey and userId once and use repeatedly in React query calls?