Question

我正在关注此Apollo分页教程：

Apollo Pagination Examples

我的问题摘要：

我有一个已知的可以在操场上工作的GraphQL查询。当我尝试获取数据并在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;
                    }
                })
            }
        />
    );
}

Answer 1

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

const {
  data: {
    errorlogsConnection: errorLogs
  } = {},
  loading,
  fetchMore,
  error,
} = useQuery(ERROR_LOG_PAGINATION)

JS TypeError：尽管有数据返回，仍无法读取未定义的属性“ ...”？

1 个答案: