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