如何在graphql Apollo客户端中实现基于游标的分页？

Question

I am following the official docs for cursor based Apollo Client implementation. I have already done the offset based pagination but cursor based seemed to be better fit in my case. The very first line is giving an error

const { data: { comments, cursor }, loading, fetchMore } = useQuery( MORE_COMMENTS_QUERY );

cannot read property 'comments' of undefined . This must be because data is still undefined. Is the documentation missing something or am I missing something ?

Answer 1

It's the docs. You should either provide a default value for data:

const { data: { comments, cursor } = {}, loading, fetchMore } = useQuery(...)

or else check whether it exists before accessing properties on it.

const { data, loading, fetchMore } = useQuery(...)
if (data) {
  const { comments, cursor } = data
}

The latter is preferred because depending on the schema, it's possible for the query to complete and the data to be null (if you had errors in the response) and the default value won't be applied if data is null , only if it's undefined .