fix(live-preview): client-side live preview cannot populate more than 10 relationships at once

[ozavodny]

What?

Set the limit query param on API requests called within the useLivePreview hook.

Why?

We are heavily relying on the block system in our pages and we reuse the media collection in a lot of the block types. When the page has more than 10 images, the API request doesn't fetch all of them for live preview due to the default 10 item limit. This PR allows the preview page to override this limit so that all the items get correctly fetched.

Our current workaround

Set the depth param of useLivePreview hook like this:

useLivePreview({
  // ...
  depth: '1000&limit=1000',
})

---

• To see the specific tasks where the Asana app for GitHub is being used, see below:
  • https://app.asana.com/0/0/1210643905956939

[jacobsfletch]

My only problem with this approach is that the limit you pass in is just a large, random number that needs to be higher than the potential number of relationships being queried.

Instead of doing this, we could set the limit dynamically based on the number of ids we're using in the query. That way it always populates all relationships without any additional configuration.

[jacobsfletch]

Ok I went ahead and made these changes myself! I do want to clarify a few things about the underlying issue, though. Mainly that this only recreated when you add more than 10 relationships at the same time.

For example, if you have an upload field with hasMany: true, selecting more than 10 images from the drawer will only populate the first 10 (or whatever your default limit is set to). However, if you have a field with 10 images already selected, then you add an 11th, all 11 will render as expected. The same is true of relationship fields.

This is because the dataloader doesn't populate relationships that were previously populated, i.e. loading the 11th document only makes a request for a single document, not the entire list. It uses the previously merged data as a sort of cache.

Also worth mentioning that on initial load, this is also not an issue. If you have 11 images saved to a field, all 11 will render as expected. This is because the initial data given to the hook already contains fully populated relationships. Limit doesn't apply here.

[github-actions]

🚀 This is included in version v3.44.0