Integration fields pagination problem

Hello. We're using your integration fields feature to pull data. In the documentation it states that only a maximum of 50 items allowed, otherwise you need to implement pagination. We have implemented pagination as is stated in the docs, however, when searching for 2nd page items in prismic catalog I cannot find them - only first page items, whereas our api returns them successfully.
Basically it's the same issue as stated here:

Any help would be appreciated, thanks.

Hello @edvinas.vitkus, welcome to the Community!

How are you doing this search? Could you give us an example to better understand your case?

Hi,

Could you explain how Publishers should be able to see all records from our Integration Fields endpoint if we are using pagination?

Currently from this UI:

user can only see first 50 items. Shouldn't Prismic automatically call our endpoint and update page={number} query param when user scrolls down to see if there any records in second, third etc. page?

Because as I understand from existing documentation (Set up Integration Fields - Prismic) only Admin can change page param and he has to do it manually. No way this is the actual flow?

Hello @tomasvit6, thanks for reaching out.

That's a good question! I’ll check with my team and be back as soon as possible.

Hello there!

So, the way it works is, the search bar is used to find items within a large catalog, but there is no way to see all the results in the 'scroll'.

Isn't it possible to at least add an additional field to select Page number in the current UI? I don't understand the point to show 50items max when it's clearly intended to be used with let's say, e-commerce catalogs, which almost always will be more than 50elements...

For the moment, it isn't possible to achieve this. Sorry for the inconvenience this may cause.

Thanks. Are you suggesting that it is not possible to have more than 50 records pulled from custom API? It sounds really really strange as it would be enormous limitation. Documentation states that we need to setup pagination:

Why you even have Pagination in documentation if it does not work? I hope we might just misunderstood each other, and this (fetching > 50 records automatically) is actually is supported.

Thank you!

Hi,

You should then update your docs here as they are clearly misleading: https://prismic.io/docs/core-concepts/integration-fields-setup#pagination
They suggest that setting up pagination in the custom api solves the problem of max 50 items per catalog. But it actually doesn't.
The way it works now is that you have to change the url by hand in the Integration Fields menu, thus losing access to any other page than the one you have stated.
We are planning on using prismic for our project which will have multi-tenancy. Might go over 5 or even 10 tenants and this pagination feature for integration fields catalog is essential to us.
Could you please check whether you guys are planning on implementing it in the future?

@edvinas.vitkus, no, that's not the case. You can retrieve all the elements in your catalog, but you need to paginate them to be 50 items by page. You're not able to see a complete list of things in the UI of the integration field in a document. You have to search for it in the search bar if it doesn't show up.

For the moment, there aren't any plans for modifying the behavior of the Integration fields API, but we're going to work on developing clearer documentation for this feature.

Thanks for the feedback.

Well it doesn't work for us.
It, currently, isn't possible for us to find page 2 items when using the search bar, only page 1.
Could you please retest this functionality on your side? Or better yet, would it be possible to have a video-call so we can share our screen and actually show you?

@edvinas.vitkus we can try and debug this together. We'll need the following information (you can send it via dm if you prefer):

  • URL of your repository
  • Details of your integration field (URL, token, etc..)
  • ID, name, and page to identify the item of your catalog

Resolved. My issue was with the API structure. Thought results_size is the size of results but it's the total amount of results through all pages.

Correct response example:

{
  "results": [
    {
      "id": "0",
      "title": "0",
      "description": "0",
      "blob": {
        "id": "0"
      }
    },
    {
      "id": "1",
      "title": "1",
      "description": "1",
      "blob": {
        "id": "1"
      }
    },
    {
      "id": "2",
      "title": "2",
      "description": "2",
      "blob": {
        "id": "2"
      }
    },
    {
      "id": "3",
      "title": "3",
      "description": "3",
      "blob": {
        "id": "3"
      }
    },
    {
      "id": "4",
      "title": "4",
      "description": "4",
      "blob": {
        "id": "4"
      }
    },
    {
      "id": "5",
      "title": "5",
      "description": "5",
      "blob": {
        "id": "5"
      }
    },
    {
      "id": "6",
      "title": "6",
      "description": "6",
      "blob": {
        "id": "6"
      }
    },
    {
      "id": "7",
      "title": "7",
      "description": "7",
      "blob": {
        "id": "7"
      }
    },
    {
      "id": "8",
      "title": "8",
      "description": "8",
      "blob": {
        "id": "8"
      }
    },
    {
      "id": "9",
      "title": "9",
      "description": "9",
      "blob": {
        "id": "9"
      }
    },
    {
      "id": "10",
      "title": "10",
      "description": "10",
      "blob": {
        "id": "10"
      }
    },
    {
      "id": "11",
      "title": "11",
      "description": "11",
      "blob": {
        "id": "11"
      }
    },
    {
      "id": "12",
      "title": "12",
      "description": "12",
      "blob": {
        "id": "12"
      }
    },
    {
      "id": "13",
      "title": "13",
      "description": "13",
      "blob": {
        "id": "13"
      }
    },
    {
      "id": "14",
      "title": "14",
      "description": "14",
      "blob": {
        "id": "14"
      }
    },
    {
      "id": "15",
      "title": "15",
      "description": "15",
      "blob": {
        "id": "15"
      }
    },
    {
      "id": "16",
      "title": "16",
      "description": "16",
      "blob": {
        "id": "16"
      }
    },
    {
      "id": "17",
      "title": "17",
      "description": "17",
      "blob": {
        "id": "17"
      }
    },
    {
      "id": "18",
      "title": "18",
      "description": "18",
      "blob": {
        "id": "18"
      }
    },
    {
      "id": "19",
      "title": "19",
      "description": "19",
      "blob": {
        "id": "19"
      }
    },
    {
      "id": "20",
      "title": "20",
      "description": "20",
      "blob": {
        "id": "20"
      }
    },
    {
      "id": "21",
      "title": "21",
      "description": "21",
      "blob": {
        "id": "21"
      }
    },
    {
      "id": "22",
      "title": "22",
      "description": "22",
      "blob": {
        "id": "22"
      }
    },
    {
      "id": "23",
      "title": "23",
      "description": "23",
      "blob": {
        "id": "23"
      }
    },
    {
      "id": "24",
      "title": "24",
      "description": "24",
      "blob": {
        "id": "24"
      }
    },
    {
      "id": "25",
      "title": "25",
      "description": "25",
      "blob": {
        "id": "25"
      }
    },
    {
      "id": "26",
      "title": "26",
      "description": "26",
      "blob": {
        "id": "26"
      }
    },
    {
      "id": "27",
      "title": "27",
      "description": "27",
      "blob": {
        "id": "27"
      }
    },
    {
      "id": "28",
      "title": "28",
      "description": "28",
      "blob": {
        "id": "28"
      }
    },
    {
      "id": "29",
      "title": "29",
      "description": "29",
      "blob": {
        "id": "29"
      }
    },
    {
      "id": "30",
      "title": "30",
      "description": "30",
      "blob": {
        "id": "30"
      }
    },
    {
      "id": "31",
      "title": "31",
      "description": "31",
      "blob": {
        "id": "31"
      }
    },
    {
      "id": "32",
      "title": "32",
      "description": "32",
      "blob": {
        "id": "32"
      }
    },
    {
      "id": "33",
      "title": "33",
      "description": "33",
      "blob": {
        "id": "33"
      }
    },
    {
      "id": "34",
      "title": "34",
      "description": "34",
      "blob": {
        "id": "34"
      }
    },
    {
      "id": "35",
      "title": "35",
      "description": "35",
      "blob": {
        "id": "35"
      }
    },
    {
      "id": "36",
      "title": "36",
      "description": "36",
      "blob": {
        "id": "36"
      }
    },
    {
      "id": "37",
      "title": "37",
      "description": "37",
      "blob": {
        "id": "37"
      }
    },
    {
      "id": "38",
      "title": "38",
      "description": "38",
      "blob": {
        "id": "38"
      }
    },
    {
      "id": "39",
      "title": "39",
      "description": "39",
      "blob": {
        "id": "39"
      }
    },
    {
      "id": "40",
      "title": "40",
      "description": "40",
      "blob": {
        "id": "40"
      }
    },
    {
      "id": "41",
      "title": "41",
      "description": "41",
      "blob": {
        "id": "41"
      }
    },
    {
      "id": "42",
      "title": "42",
      "description": "42",
      "blob": {
        "id": "42"
      }
    },
    {
      "id": "43",
      "title": "43",
      "description": "43",
      "blob": {
        "id": "43"
      }
    },
    {
      "id": "44",
      "title": "44",
      "description": "44",
      "blob": {
        "id": "44"
      }
    },
    {
      "id": "45",
      "title": "45",
      "description": "45",
      "blob": {
        "id": "45"
      }
    },
    {
      "id": "46",
      "title": "46",
      "description": "46",
      "blob": {
        "id": "46"
      }
    },
    {
      "id": "47",
      "title": "47",
      "description": "47",
      "blob": {
        "id": "47"
      }
    },
    {
      "id": "48",
      "title": "48",
      "description": "48",
      "blob": {
        "id": "48"
      }
    },
    {
      "id": "49",
      "title": "49",
      "description": "49",
      "blob": {
        "id": "49"
      }
    }
  ],
  "results_size": 51
}

Now I can see all of the results in Prismic UI as well.

I agree, there's many issues here which could be fixed easily:

@Pau here's some suggestions:

  • include a openAPI spec for the pagination problem for users to understand how to setup their API
  • at least show 50 elements in the UI sidebar
  • show a small info box or something, informing the user that he may search for more results
  • include pagination (since you use it anyway to fetch the whole data from the API) in the UI.
    • even if this is not actually practical from a UI/UX point of view, at least it stays aligned with how the logic is setup from a API GET point of view.

This feature is paramount for most advanced users I should say, and if Prismic wants to see their CMS being used more and more in products which have a bit more complex integrations, you guys should be paying attention to this.

At Teldoc, I literally would throw prismic away for our current project, if I cannot properly integrate it with my backend API which is already pulling a lot of weight in data handling. So, I need prismic to allow me to pipe all the data from the API into my CMS, so that I can allow business and product people to do their work.

I'll gladly help out if you guys need a hand.

1 Like

Thanks for your suggestions @teldoc. I'll share them with the product team.