GraphQL Mutation 仅在我重新加载页面时返回 null答案

【问题标题】：GraphQL Mutation returning null only when I reload the pageGraphQL Mutation 仅在我重新加载页面时返回 null
【发布时间】：2022-02-02 02:25:57
【问题描述】：

我将 nextJS 和 urqlClient 用于 ssr。目前我的所有页面都关闭了 ssr。我面临的问题如下。我有个人资料页面，它在从 graphql 获取用户后呈现数据。如果找不到用户，它将路由器推送用户登录。我面临的问题是，当我使用 localhost:3000/profile 手动转到浏览器中的配置文件页面时，突变在第一次渲染时返回未定义，而在第二次渲染时返回对象。

但是，如果我使用 NavBar 组件<NextLink href="/profile"> 访问配置文件页面，则突变会在第一次渲染时返回对象并且数据会正确显示。我感觉它与 SSR 有关，因为当我重新加载页面时，console.log("profile page", data); 在服务器端触发，但是当我使用导航栏时它不是。

我的所有页面都用 urqlclient 包装了

export default withUrqlClient(createUrqlClient, { ssr: false })(Profile);

这是个人资料页面的代码。

const [{ data, fetching }] = useMeQuery({ pause: isServer() });
  console.log("profile page", data);

  useEffect(() => {
    if (!data?.me) {
      router.push("/auth");
    }
  });

【问题讨论】：

标签： reactjs graphql next.js server-side-rendering urql

【解决方案1】：

所以我通过确保在获取查询时不会触发 router.push() 方法来解决此问题，并添加了 useEffect 的依赖项。这是正确的方法。和SSR无关。

  useEffect(() => {
    if (!fetching && !data?.me) {
      router.push("/auth");
    }
  },[fetching,data,router]);

【讨论】：