javascript - Obtener datos del servidor en Remix.run

Estaba explorando Remix.run y creando una aplicación de ejemplo. Me encontré con un problema que me ha estado molestando durante algún tiempo. Corrígeme si me equivoco: action() es para manejar el envío de formularios, y loader() es para obtener datos inicialmente. Para mi aplicación, usé mongoose para conectar MongoDB, definí modelos y definí una función de consulta 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 haga clic en una imagen en la interfaz de usuario. ¿Cómo puedo hacer eso sin usar formularios? No puedo preobtener los datos sin saber qué imagen fue clicada por el usuario.

Respuesta #1

Puedes crear una ruta de recursos. Estas son como rutas normales, pero no exportan un componente predeterminado (sin interfaz de usuario).

Puedes usar el hook useFetcher y llamar a fetcher.load() para llamar a tu ruta de recurso. 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 fetcher = 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>
  )
}