En esta publicación, cubriré cómo implementar la paginación en un proyecto Sveltekit usando Hygraph como CMS y el cliente houdini.
El repositorio se puede encontrar aquí.
Creando un nuevo proyecto de hygraph
Para comenzar, debemos registrarnos en hygraph y crear un nuevo proyecto. Seleccionaremos la plantilla de 'simple blog' y nos aseguraremos de tener seleccionada la casilla de 'Include template content'.
En nuestro proyecto recién creado, navegamos hacia la configuración del proyecto y bajo en 'Access' encontramos ''API access'. Luego copiamos la URL para 'Content API'.
Creando un nuevo proyecto de Sveltekit
Como todos los nuevos proyectos de Sveltekit, debemos inciarlo con npm create svelte@latest pagination-hygraph.
Luego seguimos los pasos que nos indica el terminal para finalizar la configuración.
Para continuar necesitaremos instalar Houdini Graphql para manejar las llamadas de graphql. Para configurar houdini fácilmente, podemos ejecutar npx houdini@latest init y seguir las indicaciones usando la URL que copiamos en el paso anterior.
(Opcional) Cambiar el intervalo de descarga
Con la reciente configuración creada de houdini, podemos cambiarla para obtener solo el schema.graphql una vez al inicio del programa.
Creando nuestra 'query'
Para obtener la informacion, necesitamos crear nuestra 'query'. Necesitamos crear un archivo gql en cualquier lugar de nuestro directorio 'src'.
Lo importante a tener en cuenta es que no usamos directamente la 'post' de nuestro esquema, sino a la 'postConnection'. Incluimos parámetros 'after' y 'before' para que podamos obtener después o antes de los resultados de nuestra 'query'. Es imperativo que hagamos 'query' de 'startCursor' y 'endCursor'. 'hasPreviousPage' y 'hasNextPage' son solo para mejora nuestra calidad de vida para hacer la interfaz.
Cargando la información
Una vez que tenemos la query, necesitamos obtener la información y pasarlos al cliente. Para eso usamos la función de carga del servidor para la ruta. Usamos los parámetros de búsqueda de URL para manejar la posición.
y luego podemos usar los datos en nuestra ruta como tal usando los parámetros de búsqueda en las anclas.
Últimas notas
Este es un metodo que utiliza un API de relay. Ciertamente, hay otras formas en que puedes implementar la paginación que se adaptarían mejor a tu aplicación.
