JS TypeError：尽管返回了DATA，但无法读取未定义的属性“…”？

Question

我正在关注此阿波罗分页教程：

Apollo Pagination Examples

我的问题摘要：] >>

我有一个在操场上工作的已知的GraphQL查询。当我尝试获取数据并在React组件中使用数据时，如上面的那个Apollo链接所述，我收到以下错误：

“ TypeError：无法读取未定义的属性'errorlogsConnection'”

但是，当我在Web控制台中检查来自graphQL api的响应时，查询does

实际上返回了数据。图片附在下面。

我相信我可能试图错误地引用该对象，但我无法发现我的错误是什么。

注：

我已经可以在其他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;
                    }
                })
            }
        />
    );
}

我正在关注此Apollo分页教程：Apollo分页示例我的问题摘要：我有一个在操场上工作的已知GraphQL查询。当我尝试获取数据并使用...

Answer 1

data属性将是不确定的，直到从服务器或缓存中获取数据为止。为避免错误，请避免破坏data直至加载完成，或者在适当的时候提供默认值：