Added basic pagination to homepage.

assets/js/actors/actions.js

@@ -136,7 +136,7 @@ function initActorActions(store, _router) {
                                     lessThan: $before,
                                     greaterThan: $after,
                                 },
-                                releasesTags: {
+                                releasesTagsConnection: {
                                     none: {
                                         tag: {
                                             slug: {

assets/js/fragments.js

@@ -176,13 +176,13 @@ const releaseFields = `
 `;
 
 const releasesFragment = `
-    releases(
+    connection: releasesConnection(
         filter: {
             date: {
                 lessThan: $before,
                 greaterThan: $after,
             }
-            releasesTags: {
+            releasesTagsConnection: {
                 none: {
                     tag: {
                         slug: {
@@ -193,21 +193,25 @@ const releasesFragment = `
             }
         },
         first: $limit,
+		offset: $offset,
         orderBy: $orderBy,
     ) {
-        ${releaseFields}
-        movieActors: movieActorsByMovieId(orderBy: ACTOR_BY_ACTOR_ID__GENDER_ASC) {
-            actor {
-                ${actorFields}
-            }
-        }
-        movieTags: movieTagsByMovieId(orderBy: TAG_BY_TAG_ID__PRIORITY_DESC) {
-            tag {
-                id
-                name
-                slug
-            }
-        }
+		releases: nodes {
+			${releaseFields}
+			movieActors: movieActorsByMovieId(orderBy: ACTOR_BY_ACTOR_ID__GENDER_ASC) {
+				actor {
+					${actorFields}
+				}
+			}
+			movieTags: movieTagsByMovieId(orderBy: TAG_BY_TAG_ID__PRIORITY_DESC) {
+				tag {
+					id
+					name
+					slug
+				}
+			}
+		}
+		totalCount
     }
 `;
 

assets/js/networks/actions.js

@@ -92,7 +92,7 @@ function initNetworksActions(store, _router) {
                                 }
                             }
                         ]
-                        releasesTags: {
+                        releasesTagsConnection: {
                             none: {
                                 tag: {
                                     slug: {

assets/js/releases/actions.js

@@ -4,12 +4,13 @@ import { curateRelease } from '../curate';
 import getDateRange from '../get-date-range';
 
 function initReleasesActions(store, _router) {
-	async function fetchReleases({ _commit }, { limit = 100, range = 'latest' }) {
+	async function fetchReleases({ _commit }, { limit = 10, pageNumber = 1, range = 'latest' }) {
 		const { before, after, orderBy } = getDateRange(range);
 
-		const { releases } = await graphql(`
+		const { connection: { releases, totalCount } } = await graphql(`
             query Releases(
                 $limit:Int = 1000,
+                $offset:Int = 0,
                 $after:Date = "1900-01-01",
                 $before:Date = "2100-01-01",
                 $orderBy:[ReleasesOrderBy!],
@@ -19,13 +20,17 @@ function initReleasesActions(store, _router) {
             }
         `, {
 			limit,
+			offset: Math.max(0, (pageNumber - 1)) * limit,
 			after,
 			before,
 			orderBy,
 			exclude: store.state.ui.filter,
 		});
 
-		return releases.map(release => curateRelease(release));
+		return {
+			releases: releases.map(release => curateRelease(release)),
+			totalCount,
+		};
 	}
 
 	async function fetchReleaseById({ _commit }, releaseId) {

assets/js/router.js

@@ -20,26 +20,32 @@ const routes = [
 		path: '/',
 		redirect: {
 			name: 'latest',
+			params: {
+				page: 1,
+			},
 		},
 	},
 	{
 		path: '/home',
 		redirect: {
 			name: 'latest',
+			params: {
+				page: 1,
+			},
 		},
 	},
 	{
-		path: '/latest',
+		path: '/latest/:pageNumber',
 		component: Home,
 		name: 'latest',
 	},
 	{
-		path: '/upcoming',
+		path: '/upcoming/:pageNumber',
 		component: Home,
 		name: 'upcoming',
 	},
 	{
-		path: '/new',
+		path: '/new/:pageNumber',
 		component: Home,
 		name: 'new',
 	},

assets/js/tags/actions.js

@@ -64,7 +64,7 @@ function initTagsActions(store, _router) {
                                     lessThan: $before,
                                     greaterThan: $after,
                                 },
-                                releasesTags: {
+                                releasesTagsConnection: {
                                     none: {
                                         tag: {
                                             slug: {