Tuto WP API REST : Eviter les doublons dans vos appels dynamiques d’articles (par page)

Un problème qui se pose avec l’API WordPress : lorsque vous chargez en ajax les 10 derniers articles, et qu’un peu plus tard vous scrollez pour charger la page 2, si l’auteur a écrit un nouvel article, un décalage va se créer et le dernier article de la page 1 se trouvera à nouveau en premier de la page 2. Voici comment

Le problème

Imaginez le cas suivant sur une application mobile utilisant l’API, qui affiche 3 articles par page :

• je lance mon site, il m’affiche les 3 derniers articles (id 6, 5, 4)
• je scrolle en bas de page, une requête ajax va charger la page 2 (id 3, 2, 1) et afficher les articles à la suite

Tout va bien. Maintenant imaginons le cas suivant :

• Je recharge mon site et j’obtiens toujours les 3 derniers articles en date (id 6, 5, 4)
• L’auteur du site ajoute entre temps un nouvel article ( id 7)
• plus tard, je scrolle en bas de page et la requête ajax va chercher la page 2 et j’obtiens les ids 4, 3,2

Résultat : le post 4 apparait 2 fois dans la liste.

Sur un site standard ça ne se verra pas car on utilise des pages différentes. Mais dès que vous utilisez un infinite scrolling le problème se verra tout de suite.

Que se passe t’il ?

WordPress, pour charger la page 2, va sauter les 3 premiers articles pour afficher les 3 suivants. Et comme un article (id 7) a été crée entre temps, ça crée un décalage ! Ouille !

La solution

Heureusement il existe une solution simple à mettre en place via l’API (mais également via WP Query).

Votre première requête pour récupérer les posts sera toute simple :

[pastacode lang=”php” message=”” highlight=”” provider=”manual”]

http://monsite.fr/wp-json/wp/v2/posts

[/pastacode]

Vous allez ensuite récupérer la date de publication du premier article. Les prochaines requêtes intégreront l’élément page=2 (puis 3, 4…) ainsi qu’une requête sur la date :

[pastacode lang=”php” message=”” highlight=”” provider=”manual”]

http://monsite.fr/wp-json/wp/v2/posts?filter[date_query][before]=2015-11-30T10:00:00
&page=2

[/pastacode]

Qu’est-ce que cela veut dire ?

On indique à WordPress une chose importante : on veut récupérer les articles à partir de l’ID le plus récent que l’on a récupéré sur la première page. En d’autres termes, on ignorera tout simplement les articles plus récents, crées après.

Avec cette technique toute simple, on conserve une bonne pagination et les articles se suivront sans se répéter.

Pour que ça marche complètement

Attention détail important, par défaut vous ne pouvez pas faire une date query avec l’API donc il faudra l’autoriser. Je vous renvoie à mon Tuto : Autoriser davantages de filtres pour l’API Rest WP.