ampproject / ampproject/amphtml

Request to next posts page URL not working in AMP next page

Open
#37,775 2 comments 0 reactions 0 assignees View on GitHub
P3: When Possible Stale Type: Bug WG: components
Dominant language
JavaScript
Stars
14.9k
Forks
4.1k
PR merge metrics
No merged PRs in 30d

Description

### Description

# Context
I'm using `amp-next-page` component to build an infinite scroll experience in a web. I've added a REST endpoint that returns a JSON with keys `pages` that contains posts to render and `next` to request next posts page when all posts will be rendered as documentation says.

```JSON
{
"pages": [
{
"title": "Beta ART Enduro/SM (3.546-/3.576-)",
"image": "https://formulamoto.local/wp-content/uploads/2021/05/Beta-ART-50-2008-1.jpg",
"url": "https://formulamoto.local/beta/beta-art-enduro-sm-3546-3576-2/2678.html?amp=1"
},
{
"title": "Beta Alp 4.0 (5.193 -)",
"image": "https://formulamoto.local/wp-content/uploads/2021/05/Alp-4.0-2007-Orange.jpg",
"url": "https://formulamoto.local/beta/beta-alp-40-5193/5038.html?amp=1"
},
{
"title": "Beta ALP M4 (5.304-)",
"image": "https://formulamoto.local/wp-content/uploads/2021/05/M4_Black.jpg",
"url": "https://formulamoto.local/beta/beta-alp-m4-5304/1828.html?amp=1"
},
{
"title": "Beta RR400/500/520 (8.062-/8.062-/8.120-)",
"image": "https://formulamoto.local/wp-content/uploads/2021/05/DSC_5896.jpg",
"url": "https://formulamoto.local/beta/beta-rr400-500-520-8062-8062-8120/2420.html?amp=1"
},
{
"title": "Beta ART Enduro/SM (3.546-/3.576-)",
"image": "https://formulamoto.local/wp-content/uploads/2021/05/Beta-ART-50-2008.jpg",
"url": "https://formulamoto.local/beta/beta-art-enduro-sm-3546-3576/2667.html?amp=1"
},
{
"title": "Beta Urban 200/125/200 Special/125 Special (4.083 -/3.393 -/n.d./n.d.)",
"image": "https://formulamoto.local/wp-content/uploads/2021/05/3c.jpg",
"url": "https://formulamoto.local/beta/beta-urban-200-125-200-special-125-special-4083-3393-nd-nd/5178.html?amp=1"
},
{
"title": "Beta Alp 200/125 (4.426 -/3.741 -)",
"image": "https://formulamoto.local/wp-content/uploads/2021/05/Alp200_White.jpg",
"url": "https://formulamoto.local/beta/beta-alp-200-125-4426-3741/5164.html?amp=1"
}
],
"next": "https://formulamoto.local/wp-json/formulamoto-custom-amp/v1/next-page?page=3&category-id=13&before=2021-08-21 19:00:00"
}
```
# Problem
Next pages load as expected. But when all pages are loaded `amp-next-page` doesn't request next posts list given in `next` URL. Or it requests but an error is produced I don't know.

I open browser console and I see this repeated error.
![imagen](https://user-images.githubusercontent.com/16139263/155726216-e0fb4f82-66b3-49fa-808b-008b866da3a6.png)

I've tested my endpoint and it works. And because URL of the endpoint is put initially in src attribute of `amp-next-page` component. I've searching and there are [people with same problem](https://stackoverflow.com/questions/63604349/amp-next-page-json-configuration-optional-field-next-does-not-working).

### Reproduction Steps

1. Generate REST endpoint which returns JSON with pages list and URL endpoint for next page.
2. Insert `amp-next-page` component and put in `src` attribute endpoint URL.
3. Scroll down to the end of last post and check that new posts doesn't appear.
4. While scrolling, check browser console to see if same errors as described appear.

### Relevant Logs

_No response_

### Browser(s) Affected

_No response_

### OS(s) Affected

_No response_

### Device(s) Affected

_No response_

### AMP Version Affected

2202142035002

Contributor guide

Open the contributing guide

Research direction

Reproduce the report with the amp-next-page entry point and the supplied JSON shape, then inspect the browser console and network request when the final page reaches the next URL. Confirm whether the next URL is requested and identify the failure; done means subsequent posts load without the repeated error.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.