如何将新数据添加到 React-query 中的现有数据？

Question

我有一个代码调用 API 并接收一定数量的数据。我希望第二次调用使用 React-query 库将新检索到的数据添加到现有数据中。

到目前为止我的代码是：

const fetchData = async ({queryKey : [key , pages]}) => {
  
  return (await fetch(`http://jservice.io/api/random?count=${pages}`)).json()
}

function App() {
  const [state, setState] = React.useState(10);
  const {isLoading, error, data , } = useInfiniteQuery(['general' , state], fetchData , {keepPreviousData : true} )

  
  setTimeout(() => {
    setState(20)
  }, 4444);

  console.log(data)
  return (
    <div className="App">
      h
    </div>
  );
}

我希望通过仅使用 React-query 挂钩将新获取的数据添加到现有数据来达到 4444 时间线标记。

我怎样才能做到这一点？

Answer 1

您需要使用查询中的 fetchNextPage。调用它来加载下一页。 onClick 或超时后。

<button onClick={fetchNextPage}>Load more</button>

也不要在渲染函数中设置 setTimeout，因为它会在每次渲染时被调用和执行，这会删除你的进度。不要自己跟踪当前页面，而是让 react-query 处理它。只需将 getNextPageParam 函数设置为 return 如何获取下一页并将其从 fetchData

中的查询上下文中提取为 pageParam

要呈现数据，您需要映射页面 returned 从查询内部数据，对于每个页面，查询项目 returned:

{isSuccess &&
  data.pages.map((page, index) => (
    <div key={index}>
        {page.results.map((poke) => (
            <div key={poke.name}>{poke.name}</div>
         ))}
    </div>
))}

这是一个 sandbox 的口袋妖怪。

如何将新数据添加到 React-query 中的现有数据？

How to add fresh data to an existing data in React-query?

reactjs

react-query