several errors possibly

[lycha0206]

in https://relay.dev/docs/tutorial/connections-pagination/#improving-the-loading-experience-with-usetransition
there is no CommentsLoadingSpinner
I had to use SmallSpinner

but even so, the spinner is flashing for a split second and is gone (like 0.01s). For this one, I am not sure if it is some mistake I made or is it your code.

And then at https://relay.dev/docs/tutorial/connections-pagination/#step-5--call-usepaginationfragment

why is the function Newsfeed() all of a sudden becomes

NewsfeedContents({viewer}) {

and why adding {viewer} when down below in Step 6 it is immediately {query}

also the line

const {data, loadNext} = usePaginationFragment(NewsfeedFragment, viewer);

the NewsfeedFragment should be NewsfeedContentsFragment

And then in Step 6, what is the {query}?

as in function NewsfeedContents({query}) {
there is no query passed in.

I had to change the code to the following to work:

export default function Newsfeed() {

  const queryData = useLazyLoadQuery<NewsfeedQueryType>(NewsfeedQuery, {});

  const { data, loadNext, hasNext, isLoadingNext } = usePaginationFragment(
    NewsfeedContentsFragment,
    queryData
  );

  function onEndReached() {
    loadNext(3);
  }

  const storyEdges = data.viewer.newsfeedStories.edges;

Then the page works, but the viewer in const storyEdges = data.viewer.newsfeedStories.edges; is underlined red. The message is: Property 'viewer' does not exist on type 'unknown'.

Also storyEdge in {storyEdges.map((storyEdge) => ( is also underlined red.
The message is: Parameter 'storyEdge' implicitly has an 'any' type.

[walliby]

I also cannot get the StoryCommentsSection to suspend with useTransition. Although looks like it does very briefly, before the network call finishes. There is an extra state update for some reason which changes isPending to false. Maybe related to one of these?

#3082
#4526

[walliby]

@lycha0206 looking at the api doc for usePaginationFragment, you can return isLoadingNext instead of trying to useTransition. Here is how I got mine to work...

export default function StoryCommentsSection({ story }: Props) {
  const { data, loadNext, isLoadingNext } = usePaginationFragment(
    StoryCommentsSectionFragment,
    story
  );

  const onLoadMore = () => loadNext(3);

  return (
    <>
      {data.comments.edges.map((commentEdge) => (
        <Comment key={commentEdge.node.id} comment={commentEdge.node} />
      ))}
      {data.comments.pageInfo.hasNextPage && (
        <LoadMoreCommentsButton onClick={onLoadMore} disabled={isLoadingNext} />
      )}
      {isLoadingNext && <SmallSpinner />}
    </>
  );
}

[esainty]

Confirming that I ran into the same issue as @walliby. This workaround needs to be clearly documented.

There are a suite of other issues with the tutorial that I can only assume stem from its age. Some may have been documented already, but just to bundle the ones I've noticed in one location.

The code is far from typescript compliant. Turning on strict mode turns it into a sea of red.

As has been documented here #4242 the lack of documentation around Watchman is a bit of a trip hazard, but more importantly prevents the VSCode extension from working.

The tsconfig.json only contains DOM under libs, where Intellisense requires ES to recognise the ReadonlyArrays that are generated by the compiler. This means that in a few places, data.* comes back as type any.

Several required components are for some reason sitting in a ./future folder which is not mentioned in the tutorial text.

Finally, the provided server code uses Defer and Stream which are experimental features and disabled by default, meaning that at least in my case, the entire project wouldn't start out of the box without either turning on experimental mode or removing the offending lines (which as far as I can tell shouldn't be required for this project).

[twig-atl]

For anyone wondering, I managed to fix the typescript issues by providing types to usePaginationFragment()

const queryData = useLazyLoadQuery<NewsfeedQueryType>(NewsfeedQuery, {});
const {data, loadNext, hasNext, isLoadingNext} = usePaginationFragment<NewsfeedQueryType, NewsfeedContentsFragment$key>(NewsfeedContentsFragment, queryData);

It's ugly, but it works