Tout savoir sur WordPress

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

pages

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.

doublon

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 :

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

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 :

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

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.

Cet article a été mis à jour il y a 437 jours

Article écrit par Maxime BJ

Développeur, bloggeur et formateur Web spécialisé WordPress. 31 ans. Grenoblois. Co-fondateur de WPChef, l’organisme de formation WordPress.

Organisateur de WPInAlps, le meetup WordPress Grenoblois. Vous pouvez me rencontrer lors d’événements tels que WordCamp Paris et Europe. Traducteur Français de l’extension Advanced Custom Fields. Également développeur d’applications web avec MeteorJs. Je m’occupe un site pour apprendre l’informatique aux débutants gratuitement.

J’aime les jeux vidéo, la rando, la bouffe bien grasse et les voyages.

2 Commentaires

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

  1. Hey,

    Très bon tuto en effet. je l’ai intégré sans problème à mon appli.

    J’aimerais utiliser la même solution pour les commentaires mais le filtre date_query ne fonctionne pas dessus.
    Une idée peut être?

    Merci d’avance.

    • Ah bonne question en effet ! Je ne sais pas… Car du coup il n’y a pas de WP query pour les commentaires qui soit aussi poussée. Si tu as la solution n’hésites pas à revenir la poster ici !

07955fe078987cba1362396bb6c32f48&&&&&&&&&&&&&&