Tengo un componente llamado Sidebar.tsx que está obteniendo algunos datos aquí, pero solo quiero obtener niveles solo si studentId está disponible. Revisé las consultas dependientes en la documentación de la consulta de react-query . Lo apliqué en mi código pero parece que no funciona. Esto es lo que hice.
En primer lugar, también obtuve el studentId de estudiante de una API, así es como se ve:
const studentId = intakeProgramStore.getStudentShipByUserId(authUser?.id) .data?.data.data[0];Ahora otra función para obtener programas.
class IntakeProgramStore{ getIntakeProgramsByStudent(studentId: string) { return useQuery( ['intakeProgram/studentId', studentId], () => intakeProgramService.getIntakeProgramsByStudent(studentId), { enabled: !!studentId }, ); } } export const intakeStore = new IntakeProgramStore(); Esta función se encuentra en stores/intake.store.ts y lo que hace es que, cuando se llama, llama a un método de servicio llamado intakeProgramService.getIntakeProgramsByStudent que también se importa en la parte superior y funciona bien como se esperaba. El problema que tengo aquí es que está llamando a ese servicio incluso si studentId no está definido, mientras que se suponía que lo llamaría cuando tuviera un valor.
Así es como lo llamo dentro Sidebar.tsx que es mi componente de interfaz de usuario
const programs = intakeProgramStore.getIntakeProgramsByStudent(student.id) .data?.data.data[0]; Moví el código que estaba en el archivo stores/intake.store.ts a Sidebar.tsx y ahora funcionó bien, pero no sé por qué. Así es como se ve
const programs = useQuery( ['intakeProgram/studentId', student?.id], () => intakeProgramService.getIntakeProgramsByStudent(student?.id), { enabled: !!studentNo estoy seguro de por qué no funciona cuando busco dentro de la tienda, pero funciona cuando lo hago en el componente de la interfaz de usuario.
En general, su código parece correcto. Lo único que puedo ver es que en el primer ejemplo, está llamando a useQuery dentro de una función llamada getIntakeProgramsByStudent , que es una llamada de gancho no válida. Los ganchos solo se pueden llamar:
use... .vea también las reglas de la documentación de reacción de ganchos .
Un enlace personalizado para su llamada useQuery sería:
export const useIntakeProgramsByStudent(studentId: string) { return useQuery( ['intakeProgram/studentId', studentId], () => intakeProgramService.getIntakeProgramsByStudent(studentId), { enabled: !!studentId }, ); }