在Remix.run中从服务器获取数据

Question

我正在探索Remix.run并制作一个示例应用程序。我遇到了一个困扰我一段时间的问题。如果我错了，请纠正我：action()用于处理表单提交，而loader()最初用于获取数据。对于我的应用程序，我使用mongoose连接MongoDB、定义模型和在query.server.ts文件中定义查询函数。当在UI上单击图像时，我希望通过query.server.ts文件中定义的函数从数据库中获取数据。不使用表格我怎么能做到这一点？如果不知道用户单击了什么图像，我就无法预取数据。

Answer 1

您可以创建资源路由。这些类似于常规路由，但不要导出默认组件(没有UI)。

您可以使用useFetcher钩子并调用fetcher.load()来调用资源路由。数据在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>
  )
}