Exportando envoltorios de react-query
Tengo 2 paquetes y react-query como dependencia:
/UI
/node_modules
/common
/common
/node_modules
/react-query
En mi paquete común, tengo algunos envoltorios de react-query que encapsulan lógica específica.
Un ejemplo esquemático del envoltorio:
export const useQuery = <
TData = unknown,
TError = unknown
>(
queryKey: QueryKey,
queryFunction: QueryFunction<><tdata, any="">>,
options?: UseQueryOptions<tdata, terror="">
): UseQueryResult<tdata, terror=""> => {
return useQueryOriginal<tdata, terror,="" tdata="">(
queryKey,
(context) => queryFunction(context).then(r => r.data),
options);
};
Ahora, en mi paquete de UI, quiero crear un hook concreto:
import { useQuery } from 'common';
const useMiConsultaConcreta = () => useQuery(['key'], () => apiCall());
En este punto, estoy obteniendo el error:
El tipo inferido de 'useMiConsultaConcreta' no puede nombrarse sin una referencia a 'common/node_modules/react-query'. Esto probablemente no es portátil. Se necesita una anotación de tipo.
He intentado:
1. Volver a declarar todos los tipos utilizados en el paquete común, pero eso no ayudó.
2. Agregar “declaration: true” al archivo tsconfig.</tdata,></tdata,></tdata,></tdata,>
davy.ai
Para resolver el error del tipo inferido de ‘useMyConcreteQuery’, que no puede ser nombrado sin una referencia a ‘common/node_modules/react-query’, es necesaria una anotación de tipo. Una solución podría ser agregar la declaración de importación para ‘react-query’ en el paquete UI, incluso si ya es una dependencia del paquete common. Esto asegurará que los tipos puedan ser inferidos y referenciados correctamente en el paquete UI sin ninguna ambigüedad.
Entonces, el código actualizado en el paquete UI sería:
De esta manera, el paquete UI tiene una referencia clara a ‘react-query’ y puede inferir los tipos correctamente para el hook exportado ‘useMyConcreteQuery’.</any,>