inertia icon indicating copy to clipboard operation
inertia copied to clipboard

Infinite Scrolling and merge props not working as expected

Open sicsol opened this issue 1 year ago • 0 comments

Version:

  • @inertiajs/react version: 2.0.0-beta.2

Describe the problem:

When using api resources as a response it behaves like it did in version 1 no merging strategy is made here it just returns the second page instead of merging the data property.

return Inertia::render('Index', [
    'posts' => Inertia::merge(PostResource::collection($posts))
]);

On the UI side i'm using a function to get the next results.

const { data, meta, links } = posts;

function loadNext() {
     if (links.next) {
          router.get(links.next);
     }
}

Your code doesn't seem to take standard laravel pagination responses into account. Maybe if there was a way to define a merging strategy that would be great so it can accommodate various different responses?

  protected mergeProps(pageResponse: Page): void {
    if (this.requestParams.isPartial() && pageResponse.component === currentPage.get().component) {
      const propsToMerge = pageResponse.mergeProps || []

      propsToMerge.forEach((prop) => {
        const incomingProp = pageResponse.props[prop]

        if (Array.isArray(incomingProp)) {
          pageResponse.props[prop] = [...((currentPage.get().props[prop] || []) as any[]), ...incomingProp]
        } else if (typeof incomingProp === 'object') {
          pageResponse.props[prop] = {
            ...((currentPage.get().props[prop] || []) as Record<string, any>),
            ...incomingProp,
          }
        }
      })

      pageResponse.props = { ...currentPage.get().props, ...pageResponse.props }
    }
  }

sicsol avatar Oct 22 '24 17:10 sicsol