开发者问题收集

JS TypeError:尽管返回了数据,但无法读取未定义的属性“...”?

2019-10-29
2164

我正在遵循此 Apollo Pagination 教程:

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