我用apollo来获取数据,如何实现如果页面重新渲染它会显示新的数据,如何在nextjs useEffect()中实现useQuery apollo?
import { GET_ALL_USERS } from "@/graphql/queries"
import { useQuery } from "@apollo/client"
import { useEffect } from "react";
export default function Home() {
const { data, loading } = useQuery(GET_ALL_USERS);
useEffect(() => {
})
return (
<>
<CreateUser />
{
loading ?
<span>Loading data, Please wait...</span>
:
data?.getAllUsers.map((user: any, index: any) => {
return <div key={index}>{user.name} {user.username}</div>
})
}
</>
)
}
2条答案
按热度按时间aiqt4smr1#
编写
useEffect
而不使用依赖关系数组是一个糟糕的做法。另外,为什么页面会重新呈现?尝试找出页面重新呈现的原因,然后您将了解如何实现它。如果有帮助,Apollo有一个关于Refetching Queries的很好的文档,所以也可以查看一下。但是看看代码,你应该看到用户列表,除非你有一个错误。试着把
error
从loading
和data
中拉出来,看看这是否是你看不到用户列表的原因。fumotvh32#
好了,既然你想在插入新数据后显示它,你就需要编辑该高速缓存。这个操作是免费的,因为它根本不与服务器通信。
根据您的情况,您可能希望使用
writeQuery
或cache.modify
。这两个函数允许您在本地更改缓存数据,而无需从服务器发送请求。在这种情况下使用它们是完全有意义的,因为您不必担心数据的有效性和陈旧性,因为您刚刚创建了新数据。您只想显示它而无需重新触发查询。