Tengo una biblioteca que expone un gancho React - usePlayground . Esto solo se puede llamar dentro del contexto de una función y, cuando se llama, devuelve un objeto como este:

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

Tengo un componente, UserDetails que se parece a esto.

Detalles de usuario.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> }

Tengo un servicio de consulta de reacción que debe calcular la ID de usuario y la clave de API para pasar al consumidor. Recibo una JSON circular reference detected desde mis devtools. También he leído que se supone que no debes usar un objeto como este como argumento para la consulta de React.

usuario-servicio.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); }

Me gustaría calcular la apiKey y el ID de usuario una vez y acceder automáticamente en todos mis ganchos de consulta de reacción usando consultas dependientes , pero recibo el error "Referencia circular JSON". ¿Cómo puedo calcular apiKey e ID de usuario una vez y usarlos repetidamente en las llamadas de consulta de React?