Estaba explorando Remix.run y creando una aplicación de muestra. Me encontré con un problema que me ha estado molestando desde hace algún tiempo. Corríjame si me equivoco: action() es para manejar el envío de formularios, y loader() es para obtener datos inicialmente. Para mi aplicación, utilicé mongoose para conectar MongoDB, modelos definidos y función de consulta definida en un archivo query.server.ts . Quiero obtener datos de la base de datos a través de una función definida en el archivo query.server.ts cuando se hace clic en una imagen en la interfaz de usuario. ¿Cómo puedo hacer eso sin usar formularios? No puedo obtener previamente los datos sin saber en qué imagen hizo clic el usuario.
Puede crear una ruta de recursos. Son como rutas normales, pero no exportan un componente predeterminado (sin interfaz de usuario).
Puede usar el gancho useFetcher y llamar a fetcher.load() para llamar a su ruta de recursos. Los datos están en fetcher.data .
// routes/query-data.ts export const loader: LoaderFunction = async ({request}) => { const url = new URL(request.url) const img = url.searchParams.get('img') const data = await getData(img) return json(data) } // routes/route.tsx export default function Route() { const fetch = useFetcher() const handleImgClick = (e) => { const img = e.target fetcher.load(`/query-data?img=${img.attr('src')}`) } return ( <div> <img onClick={handleImageClick} src="/images/file.jpg" /> <pre>{ JSON.stringify(fetcher.data, null, 2) }</pre> </div> ) }