next.js 使用对象作为搜索查询的SWR分页

anauzrmj 于 2023-06-05 发布在其他

关注(0)|答案(1)|浏览(101)

我一直在使用SWR进行分页，以在页面上显示数据。起初，它是一个简单的API，有两个查询字符串：page和size。

const fetcher = (...args) => fetch(...args).then((res) => res.json());

const { data, error } = useSWR(
  `/api/pager?page=${pageIndex}&size=${pageSize}`,
  fetcher
);

到目前为止一切顺利。现在我想给数据添加搜索功能。搜索条件可能很复杂。除了搜索字符串，我还想搜索日期，分数和其他一些领域。把它们放在URL搜索查询中似乎效率不高，因为URL会变得太长。

const searchCriteria = {
  description: "some foo",
  startDate: new Date("2023-04-01"),
  endDate: new Date("2023-04-30"),
  submitted: true
}

有没有一种方法可以通过提供一个对象来对SWR进行分页？官方文件看起来很模糊。如果可以提供示例代码，请表示感谢。

next.js

来源：https://stackoverflow.com/questions/76371885/swr-pagination-with-object-as-search-queries

1条答案

按热度按时间

6ovsh4lw1#

如果可以修改API，则使用POST方法并在body中发送数据：

const fetcher = ({ url, data }) => fetch(url, {
  method: 'POST',
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify(data)
}).then((res) => res.json());

const searchCriteria = {
  description: "some foo",
  startDate: new Date("2023-04-01"),
  endDate: new Date("2023-04-30"),
  submitted: true
}

const { data, error } = useSWR({
    url: `/api/pager`,
    data: { ...searchCriteria. page: pageIndex, size: pageSize  }
  },
  fetcher
);

否则，您可以使用URLSearchParams将搜索参数与URL连接起来：

const searchParams = new URLSearchParams(searchCriteria);

const { data, error } = useSWR(
  `/api/pager?page=${pageIndex}&size=${pageSize}&${searchParams.toString()}`,
  fetcher
);

赞(0）回复(0）举报 2023-06-05

我来回答

next.js 使用对象作为搜索查询的SWR分页

1条答案

相关问题

热门标签

最新问答