Graphql 查询在 graphql 服务器上运行良好，但在客户端上运行不佳

Question

我有一个解析器用于检查用户登录是否

 // ______________________________Check if user logged in____________________________________
  @Query((_return) => User, { nullable: true })
  async user(@Ctx() { req }: Context): Promise<User | null | undefined> {
    console.log(req.session.userId)
    if (!req.session.userId) return null;
    else{
      return await User.findOne(req.session.userId)
    }
  }

在 http://localhost:4000/graphql 上工作，但是当我在客户端（React）上查询时，它返回未定义。

客户端查询代码

  const { data, loading, error } = useUserQuery();
  console.log(`data:${data}`)
  console.log(`error:${error}`)

我使用 codegen 生成 useUserQuery() ，它就像

export function useUserQuery(baseOptions?: Apollo.QueryHookOptions<UserQuery, UserQueryVariables>) {
        const options = {...defaultOptions, ...baseOptions}
        return Apollo.useQuery<UserQuery, UserQueryVariables>(UserDocument, options);
      }

我客户端上的 cookie 仍然存在，但它不起作用，我该如何修复它？

Answer 1

您的 Apollo 查询将需要有限的时间才能返回答案；这就是为什么当您立即记录 ${data} 时，您会得到 undefined。

您可以通过注销 loading 变量来确认这一点 - 您会看到它是 true - 查询“正在运行”并且 data 将继续在 loading 变为 false 之前，将处于未定义状态。

因此，处理此问题的一个非常简单的方法可能是 this Apollo 文档示例 - 在我们加载时提前返回：

const { data, loading, error } = useUserQuery();
if (loading) return 'Loading...';

// At this point we either have an error or data; handle it
console.log(`data:${data}`)
console.log(`error:${error}`)

如果您有能力在数据到达之前“停止世界”（或至少是 UI），那很好，但是一般来说我喜欢尽可能多地进行渲染，并使用 useEffect()“监听”data，一旦它可用，您就可以执行某些操作：

const { data, error } = useUserQuery();

useEffect(() => {
  // Always check for an error first:
  if (error) {
    console.log(`error:${error}`)
  }
  
  if (data) {
    // Handle the data
    console.log(`data:${data}`)
  }
}, [data, error]);

...

// Always return the UI
return (
  ...
);