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

Infinite Scrolling and merge props not working as expected #2057

Open
sicsol opened this issue Oct 22, 2024 · 1 comment
Open

Infinite Scrolling and merge props not working as expected #2057

sicsol opened this issue Oct 22, 2024 · 1 comment
Labels
react Related to the react adapter

Comments

@sicsol
Copy link

sicsol commented Oct 22, 2024

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 sicsol added the react Related to the react adapter label Oct 22, 2024
@HichemTab-tech
Copy link

HichemTab-tech commented Nov 8, 2024

Hi nice catch ! I noticed the same thing and opened a pull request in order to fix this inertia-laravel
And
inertiajs

I hope ut will be accepted so we can go forward with our projects because this issue is really blocking :").

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
react Related to the react adapter
Projects
None yet
Development

No branches or pull requests

2 participants