如何在nextjs useEffect()中实现useQuery apollo?

q8l4jmvw  于 2023-03-22  发布在  其他
关注(0)|答案(2)|浏览(146)

我用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>
          })
      }
    </>
  )
}
aiqt4smr

aiqt4smr1#

编写useEffect而不使用依赖关系数组是一个糟糕的做法。另外,为什么页面会重新呈现?尝试找出页面重新呈现的原因,然后您将了解如何实现它。如果有帮助,Apollo有一个关于Refetching Queries的很好的文档,所以也可以查看一下。
但是看看代码,你应该看到用户列表,除非你有一个错误。试着把errorloadingdata中拉出来,看看这是否是你看不到用户列表的原因。

fumotvh3

fumotvh32#

好了,既然你想在插入新数据后显示它,你就需要编辑该高速缓存。这个操作是免费的,因为它根本不与服务器通信。
根据您的情况,您可能希望使用writeQuerycache.modify
这两个函数允许您在本地更改缓存数据,而无需从服务器发送请求。在这种情况下使用它们是完全有意义的,因为您不必担心数据的有效性和陈旧性,因为您刚刚创建了新数据。您只想显示它而无需重新触发查询。

相关问题