GraphQL 查询返回未定义但在我刷新页面时工作正常？答案

【问题标题】：GraphQL query returns undefined but works fine when I refresh the page?GraphQL 查询返回未定义但在我刷新页面时工作正常？
【发布时间】：2020-01-05 16:25:55
【问题描述】：

我正在执行一个相当复杂的 GraphQL 查询。有时它返回未定义，但是当我刷新页面时它可以工作。

我正在构建一个 Web 应用程序，使用 ReactJS 作为前端，并使用 GraphQL 来获取数据。查询非常复杂，即使我注释掉页面中的整个代码（因此实际上没有向页面呈现信息，只是执行了查询），它有时仍然返回未定义。

我已经在 GraphQL 操场上尝试过查询，它运行良好。

如果我查看我的服务器响应，0.chunk.js.map 响应时间很长。

有人知道这可能是什么吗？

我正在呈现的页面在组件层次结构的不同级别执行了 5 个不同的 graphQL 查询。但经常返回未定义的总是最高级别组件中的查询。

【问题讨论】：

API 的响应是什么？请务必检查网络响应。
您不必提供查询本身，但更多上下文会有所帮助。例如，包括您调用并尝试使用查询结果的代码会很好。这是一个网络应用程序，还是您从移动客户端或其他服务器调用服务器？您正在使用哪些相关的库/框架？您是否真的从服务器获得了响应，但无法在您的代码中访问它？
我已经添加了更多信息，对不起！

标签： reactjs graphql

【解决方案1】：

data 在从服务器获取查询时可能未定义。你可以为它提供一个默认值，这样解构就可以正常工作：

({ data: { movie } = {}, error, loading }) => {

您甚至可以使用解构访问更多嵌套字段，但您需要在每个级别提供一个默认值。例如：

({ data: { movie: { title } = {} } = {}, error, loading }) => {

请注意，如果请求返回错误并且一直冒泡到根目录，data 可能会以 null（而不是 undefined）结束。在这种情况下，默认值将无济于事。但是您仍然可以通过这种方式防范空值：

const movie = data && data.movie

或者使用类似lodash的get。

【讨论】：

如果嵌套字段返回未定义并且我尝试访问它们，例如访问 data.movie.owner.firstName 中的 firstName，我如何进行检查以确保不会发生错误。我会做 const firstName = data && data.movie && data.movie.owner & data.movie.owner.firstName。每次我尝试访问嵌套字段时，这似乎都需要付出很多努力！
是的。如果你已经有了像if (error) return ... 这样的逻辑，那么这并不是必需的。您可以将解构从函数签名移到该检查下方。这样，如果数据由于错误而为空，则永远无法到达解构代码。