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）上查询时它 return 未定义。

客户端查询代码

  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 将继续 undefined 直到 loading 变为假。

所以一个非常简单的方法来处理这个可能就像 this Apollo docs example - 只是 return 在我们 loading:

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），那很好，但通常我喜欢尽可能多地继续渲染，并且“ listen" to the data with a useEffect(), 然后你可以在它可用后做一些事情：

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 (
  ...
);

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

Graphql query work well on graphql server but not on client

reactjs

graphql