Cursor-based pagination not working for usePublications about lens-sdk

[desfero]

Thank you so much for a nice repro example. I can also see it's happening in our web-wagmi example app (https://github.com/lens-protocol/lens-sdk/blob/main/examples/web-wagmi/src/publications/UsePublications.tsx) and seems to be a regression we introduced recently while adding the way to fetch previous items.
Will look into it with the team tomorrow and push a fix 🌿 .

[krzysu]

I've spent some time today on investigating this but I didn't find the issue.

• issue is present in production setting, but not in development or sandbox (weird)
• createPublicationsFieldPolicy calls cursorBasedPagination that sets correctly moreAfter field, it is present in apollo cache and I see it when read/merge functions all called from type policy
• but apollo query when called as a hook Apollo.useQuery returns paginated result without additional @client only fields
• any ideas?

[krzysu]

@melissafzhang - we identified the issue and released a patch as v1.1.1, could you please try and let us know if it works for you?

npm install @lens-protocol/[email protected]

[melissafzhang]

@krzysu thanks! Looks like it's fixed. Another small issue I noticed was that loading never changes to true when calling next. Is that intended? Updated the code sandbo with an example.

[desfero]

@melissafzhang its intended behaviour to not change loading while fetching more data (either with next or prev).
The loading flag only indicates the initial request to fetch the data and folks often use it in a following way:

function Publications() {
  const { loading, data } = usePublications(...);
  
  if (loading) {
    return <PublicationsSkeleton />
  } 

  return data.map(publication => <Publication publication={publication} />);
}

Changing the flag in the above scenario would cause the UI to flicker with the loading indicator while the next/prev items are fetching which we can both agree is quite a bad UX 😄.

In your specific case unless there is some strict UX requirements to have load more button i would go with an infinite scroll which significantly reduced cognitive overhead on the user when consuming any sort of lists (feed/publications/etc).
Please have a look for inspiration inside our web-wagmi example where we use infinite scroll approach and have already premade hook (https://github.com/lens-protocol/lens-sdk/blob/main/examples/web-wagmi/src/hooks/useInfiniteScroll.ts).
Let me know if that's helpful 🙏