JS TypeError:尽管返回了数据,但无法读取未定义的属性“...”?
2019-10-29
2164
我正在遵循此 Apollo Pagination 教程:
我的问题摘要:
我有一个已知有效的 GraphQL 查询,可在 Playground 中使用。当我尝试获取数据并在 React 组件中使用它时(如上面的 Apollo 链接中所述),我收到以下错误:
“TypeError:无法读取未定义的属性‘errorlogsConnection’”
但是,当我在 Web 控制台中检查来自 graphQL api 的响应时,查询 确实 返回了数据。图片附在下面。
我相信我可能试图错误地引用该对象,但我无法发现我的错误是什么。
注意: 我已经能够在其他 React 组件中查询和使用这个相同的 API 端点,对于同一个项目,没有任何问题。
这是所涉及的代码:
我正在使用此查询,它在我的 GraphiQL 游乐场中有效:
query errorlogsConnection($cursor: String) {
errorlogsConnection(orderBy: errorid_DESC, first: 4, after: $cursor) {
edges {
node {
errorid
errorlog
entrydate
}
}
pageInfo {
hasPreviousPage
hasNextPage
endCursor
startCursor
}
}
}
这是我从他们的教程中改编的 ReactJS 代码:
function ErrorLogsPagination() {
const {data: {errorlogsConnection: errorLogs}, loading, fetchMore, error} = useQuery(
ERROR_LOG_PAGINATION
);
if (loading) return <p>Loading...</p>;
if (error) return <p>Error :(</p>;
return (
<ErrorLogs
entries={errorLogs || []}
onLoadMore={() =>
fetchMore({
variables: {
cursor: errorLogs.pageInfo.endCursor
},
updateQuery: (previousResult, { fetchMoreResult }) => {
const newEdges = fetchMoreResult.errorLogs.edges;
const pageInfo = fetchMoreResult.errorLogs.pageInfo;
return newEdges.length
? {
// Put the new comments at the end of the list and update `pageInfo`
// so we have the new `endCursor` and `hasNextPage` values
comments: {
__typename: previousResult.errorLogs.__typename,
edges: [...previousResult.errorLogs.edges, ...newEdges],
pageInfo
}
}
: previousResult;
}
})
}
/>
);
}
1个回答
在从服务器或缓存中获取数据之前,
data
属性将处于未定义状态。为了防止出现错误,请避免在加载完成之前解构
data
,或者在适当的情况下提供默认值:
const {
data: {
errorlogsConnection: errorLogs
} = {},
loading,
fetchMore,
error,
} = useQuery(ERROR_LOG_PAGINATION)
Daniel Rearden
2019-10-29