Booste Ton App avec Weweb et Supabase : Filtres, Pagination et Astuces de Pro

I - Introduction

Si tu développes une application avec Weweb et Supabase, tu vas forcément vouloir afficher rapidement de belles données sans te prendre la tête. Pas besoin de réinventer la roue : la table (ou grid) par défaut te permet d’obtenir un rendu esthétique et performant, sans coder un composant à partir de zéro. Mais, très vite, l’envie d’aller plus loin se fera sentir, surtout quand tu voudras ajouter des filtres pour affiner tes résultats.

II - PostgREST, Qu’est-ce que c’est ?

PostgREST… un mot avec plus de consonnes qu’une mauvaise partie de Scrabble ! Mais derrière ce nom barbare se cache un service ultra-pratique.
PostgREST transforme automatiquement ta base de données PostgreSQL en une API RESTful complète.
👉 Concrètement, tu peux requêter ta base sans avoir à coder chacun de tes endpoints.
👉 Mieux encore, grâce aux query params, tu peux ajouter des filtres à tes requêtes tout en respectant les règles de sécurité définies dans PostgreSQL.
Attention, ce dernier point va être un véritable game-changer ! Reste bien attentif…

III - Les Filtres Natifs en Front-End avec Weweb

Avec Supabase, tu as deux manières d’intégrer une nouvelle collection dans Weweb. On va explorer ensemble :

a) Le Plugin Supabase

Weweb nous facilite la vie en développant le plugin Supabase, qui abstrait pas mal de complexité.
Tu as deux modes pour utiliser l’API :

• Mode “guided” : il te permet de sélectionner simplement les colonnes à récupérer lors de ton appel API.

  [Photo du mode guidé]

• Mode “advanced” : il te permet d’utiliser un langage spécifique à Supabase pour requêter les colonnes (et bien plus encore).
  Reste avec moi, tu verras, c’est simple comme bonjour !

Je te préparerai un article dédié pour te montrer toutes les possibilités offertes par ce plugin.

b) Le Plugin REST API

Je te vois venir avec la question :

Eh bien, dans mon cas, j’ai construit un backend avec n8n qui redirige mes requêtes vers Supabase.
Le plugin REST API t’ouvre plus de portes en te permettant de comprendre la logique derrière Supabase, peu importe le front-end utilisé – y compris Weweb.
Et si, par la suite, tu décides d’opter pour le plugin natif Supabase, tu comprendras alors beaucoup plus rapidement la logique de tes requêtes.

IV - Pagination et Filtres Backend avec Supabase

Afficher 200 résultats, c’est cool… tant que ta table ne contient pas des millions de lignes !
Si tu veux gérer des milliers, voire des millions de données, faire la pagination côté front ne tiendra pas la route (ton navigateur ferait grève, c’est moi qui te le dis). La solution : paginer en backend.

a) Les Opérateurs Simples (Exemple « égal à »)

Reprenons l’exemple d’une table countries (pays et population).
Si tu veux filtrer pour n’afficher que la France et les pays avec une population supérieure à 1 million, tu vas utiliser la requête suivante :

jsxCopyGET /countries?country_name=eq.France&population=gt.1000000

• eq.

  signifie « égal à ».

• gt.

  veut dire « greater than » (supérieur à).

Simple et efficace, non ?

b) Le Paramètre select

Le paramètre select te permet de choisir quelles colonnes retourner, un atout précieux pour optimiser tes requêtes.

• Pour récupérer toutes les colonnes :

  jsxCopyGET /countries?select=*

• Pour n’afficher que le nom du pays et sa population :

  jsxCopyGET /countries?select=country_name,population

c) La Pagination avec offset et limit

Pour paginer, deux opérateurs entrent en jeu :

• offset

  indique combien de lignes passer avant de commencer à afficher.

• limit

  fixe le nombre de résultats par page.

Par exemple, pour afficher 10 résultats à partir du début :

jsxCopyGET /countries?select=*&offset=0&limit=10

Si offset est à 10, cela signifie que la 11ème ligne sera affichée en premier.

V - Utiliser des Filtres Backend Dynamiques

Passons à la vitesse supérieure !
Imagine pouvoir construire dynamiquement ton URL de requête pour n’y inclure que les filtres sélectionnés. Avec Weweb, tu peux construire ton URL en combinant la puissance du JavaScript et tes paramètres de requête.
En pratique, cela te permet de vérifier si une variable de filtre est vide ou bien si elle contient une valeur avant de l’ajouter à l’URL.
Dans le projet sur lequel je travaille actuellement, la requête s’adapte en temps réel en fonction des filtres actifs. C’est un peu comme avoir un super-pouvoir sur ta base de données !

VI - Conclusion

Voilà, tu as désormais toutes les cartes en main pour optimiser l’affichage et la gestion de tes données avec Weweb et Supabase.

Que tu sois adepte du plugin natif ou que tu préfères le plugin REST API, la logique reste la même et te permettra de créer des applications performantes, même avec des volumes de données dignes d’un recensement national.
Alors, prêt à booster ton application et à épater tes clients ? Reste connecté, car je te réserve d’autres articles pour approfondir chacune de ces astuces de pro !