JS TypeError:无法读取属性“..."未定义，尽管数据被返回? [英] JS TypeError: Cannot Read Property "..." of Undefined, Despite DATA being returned?

问题描述

我正在关注这个 Apollo 分页教程:

解决方案

data 属性将是未定义的，直到从服务器或缓存中获取数据.为防止出现错误，请避免在加载完成之前对 data 进行解构，或者在适当的情况下提供默认值:

const {数据: {错误日志连接:错误日志} = {},加载，获取更多，错误，} = useQuery(ERROR_LOG_PAGINATION)

I am following this Apollo Pagination tutorial:

Apollo Pagination Examples

Summary of my issue:

I have a known working GraphQL query that works in the playground. When I try to fetch data and use it in a React component, as outlined in that Apollo link above, I get the following error:

"TypeError: Cannot read property 'errorlogsConnection' of undefined"

However, when I check the response from the graphQL api in the web console, the query does in fact return data. Picture attached below.

I believe I'm probably trying to reference the object incorrectly but I can't spot what my mistake is.

Note: I have been able to query and use this same API endpoint in other React components for this very same project without issue.

Here is the code involved:

I am using this query, which works in my GraphiQL playground:

query errorlogsConnection($cursor: String) {
  errorlogsConnection(orderBy: errorid_DESC, first: 4, after: $cursor) {
    edges {
      node {
        errorid
        errorlog
        entrydate
      }
    }
    pageInfo {
      hasPreviousPage
      hasNextPage
      endCursor
      startCursor
    }
  }
}

Here is the ReactJS code that I've adapted from their tutorial:

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;
                    }
                })
            }
        />
    );
}

解决方案

The data property will be undefined until the data is fetched from the server or the cache. To prevent the error, either avoid destructuring data until after loading is complete, or else provide default values where appropriate:

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

这篇关于JS TypeError:无法读取属性“..."未定义，尽管数据被返回?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！