Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Pagination with infinite scroll example #2353

Closed
uxxman opened this issue Jan 11, 2023 · 4 comments · Fixed by #2354
Closed

Pagination with infinite scroll example #2353

uxxman opened this issue Jan 11, 2023 · 4 comments · Fixed by #2354
Labels
bug Something isn't working

Comments

@uxxman
Copy link

uxxman commented Jan 11, 2023

React version: 18.1.0

TypeScript version 4.6.3

Rest Hooks version: rest-hooks/react: 7.1.3, rest-hooks/rest: 6.2.4

Package manager version: npm: 8.19.2

Environment version: react-native: 0.70.5

Node version: 16.13.2

Describe the bug
I am using the code example from tests, the list is getting updated (new items are appended) properly but meta (paging) information is only from first page.

// Entity
export class PaginatedArticle extends Entity {
  readonly id: number | undefined = undefined;
  readonly title: string = '';

  pk() {
    return this.id?.toString();
  }
}

// Shared resource
function createPaginatableResource<U extends string, S extends Schema>({
  path,
  schema,
  Endpoint = RestEndpoint,
}: {
  readonly path: U;
  readonly schema: S;
  readonly Endpoint?: typeof RestEndpoint;
}) {
  const baseResource = createResource({ path, schema, Endpoint });

  const getList = baseResource.getList.extend({
    schema: { nextPage: null, items: [PaginatedArticle] }
  });

  const getNextPage = getList.paginated((v: { page: number | undefined }) => []);

  return {
    ...baseResource,
    getList,
    getNextPage,
  };
}

// Resource
const PaginatedArticleResource = createPaginatableResource({
  path: 'http://api/articles/:id',
  schema: PaginatedArticle,
});

// Component
export default function ArticlesList() {
  const { fetch } = useController();
  const { items, nextPage } = useSuspense(PaginatedArticleResource.getList);
  console.log(items, nextPage);

  const loadMore = useCallback(async () => {
    fetch(PaginatedArticleResource.getNextPage, { page: nextPage });
  }, [nextPage]);

  return (
    <FlatList
        data={items}
        renderItem={renderItem}
        onEndReached={loadMore}
        keyExtractor={item => item.id}
        onEndReachedThreshold={0.5}
      />
  );
}

From the console.log(items, nextPage), the items get updated with first and second page, but the nextPage values always remains 2, never goes to next page. Use to work with "@rest-hooks/rest": "5.2.0" with the old usePagintor hook example

@uxxman uxxman added the bug Something isn't working label Jan 11, 2023
@ntucker
Copy link
Collaborator

ntucker commented Jan 12, 2023

Thanks for the report. I'll look into this as soon as my flight lands back home.

@uxxman
Copy link
Author

uxxman commented Jan 12, 2023

Thanks for the report. I'll look into this as soon as my flight lands back home.

Appreciate :) have a nice flight ;)

@ntucker
Copy link
Collaborator

ntucker commented Jan 12, 2023

Haha, was able to figure it out during my layover. My colleague to review might be asleep now tho so could be a day before it gets released

@uxxman
Copy link
Author

uxxman commented Jan 12, 2023

That was quick 😱 as always 😄

No worries, looking at the linked PR, its a small fix I can try it out on local fork until this gets released. n again have a nice next flight 😆

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants