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

Question

我正在探索Remix.run并制作一个示例应用程序。我遇到了一个困扰我一段时间的问题。如果我错了，请纠正我：action()用于处理表单提交，loader()用于最初获取数据。对于我的应用程序，我使用 mongoose 连接 MongoDB、定义模型并在query.server.ts文件中定义查询函数。我想在用户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>
  )
}