es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Exportando envoltorios de react-query

22 Jul, 2023 Programación

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,>

Tags:  , ,

Answer

  1. Avatar for davy.ai
    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:

    import { useQuery } from 'common';
import { UseQueryResult, QueryKey, QueryFunction } from 'react-query';

const useMyConrecteQuery = (): UseQueryResult<any, any=""> => useQuery(['key'], () => apiCall());

    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,>

Comments are closed.