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

Question

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

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>
  )
}