Abstracted fragments and curation. Using GraphQL for tags.

assets/components/tags/tag.vue

@@ -50,7 +50,7 @@
             </div>
 
             <div class="content-inner">
-                <Releases :releases="releases" />
+                <Releases :releases="tag.releases" />
             </div>
         </div>
     </div>
@@ -68,17 +68,13 @@ import Releases from '../releases/releases.vue';
 const converter = new Converter();
 
 async function fetchReleases() {
-    this.releases = await this.$store.dispatch('fetchTagReleases', this.$route.params.tagSlug);
+    this.tag = await this.$store.dispatch('fetchTags', { tagSlug: this.$route.params.tagSlug });
 }
 
 async function mounted() {
-    [this.tag] = await Promise.all([
-        this.$store.dispatch('fetchTags', { tagId: this.$route.params.tagSlug }),
-        this.fetchReleases(),
-    ]);
-
-    this.description = converter.makeHtml(escapeHtml(this.tag.description));
+    this.tag = await this.$store.dispatch('fetchTags', { tagSlug: this.$route.params.tagSlug });
 
+    this.description = this.tag.description && converter.makeHtml(escapeHtml(this.tag.description));
     this.pageTitle = this.tag.name;
 }
 
@@ -90,6 +86,7 @@ export default {
     data() {
         return {
             tag: null,
+            description: null,
             releases: null,
             pageTitle: null,
         };

assets/components/tags/tags.vue

@@ -47,7 +47,7 @@ import Tag from '../tile/tag.vue';
 
 async function mounted() {
     const tags = await this.$store.dispatch('fetchTags', {
-        slug: [
+        slugs: [
             'airtight',
             'anal',
             'double-anal',

assets/js/curate.js

@@ -0,0 +1,30 @@
+function curateActor(actor) {
+    const curatedActor = {
+        ...actor,
+        avatar: actor.avatar[0],
+        origin: actor.originCountry && {
+            country: actor.originCountry,
+        },
+    };
+
+    return curatedActor;
+}
+
+function curateRelease(release) {
+    const curatedRelease = {
+        ...release,
+        actors: release.actors.map(({ actor }) => curateActor(actor)),
+        poster: release.poster[0],
+        network: release.site.network,
+        tags: release.tags.map(({ tag }) => tag),
+    };
+
+    if (release.trailer) [curatedRelease.trailer] = release.trailer;
+
+    return curatedRelease;
+}
+
+export {
+    curateActor,
+    curateRelease,
+};

assets/js/fragments.js

@@ -0,0 +1,119 @@
+const siteFragment = `
+    site {
+      id
+      name
+      slug
+      url
+      network {
+        id
+        name
+        slug
+        url
+      }
+    }
+`;
+
+const releaseActorsFragment = `
+    actors: releasesActors(orderBy: GENDER_ASC) {
+      actor: releaseActor {
+        id
+        name
+        slug
+        birthdate
+        age
+        originCountry: countryByBirthCountryAlpha2 {
+          alpha2
+          name
+          alias
+        }
+        avatar: actorsMediasByTargetId(condition: { role: "avatar" }) {
+          thumbnail
+        }
+      }
+    }
+`;
+
+const releaseTagsFragment = `
+    tags: releasesTagsByTargetId {
+      tag: releaseTag {
+        name
+        priority
+        slug
+        id
+      }
+    }
+`;
+
+const releasePosterFragment = `
+    poster: releasesMediasByTargetId(condition: { role: "poster" }) {
+      index
+      path
+      thumbnail
+    }
+`;
+
+const releasePhotosFragment = `
+    photos: releasesMediasByTargetId(condition: { role: "photo" }) {
+      index
+      path
+      thumbnail
+    }
+`;
+
+const releaseTrailerFragment = `
+    trailer: releasesMediasByTargetId(condition: { role: "trailer" }) {
+      index
+      path
+      thumbnail
+    }
+`;
+
+const releasesFragment = `
+  releases(first:$limit, orderBy: DATE_DESC) {
+    id
+    title
+    date
+    createdAt
+    url
+    ${releaseActorsFragment}
+    ${releaseTagsFragment}
+    ${releasePosterFragment}
+    ${siteFragment}
+  }
+`;
+
+const releaseFragment = `
+  release(id: $releaseId) {
+    id
+    title
+    description
+    date
+    duration
+    createdAt
+    shootId
+    url
+    ${releaseActorsFragment}
+    ${releaseTagsFragment}
+    ${releasePosterFragment}
+    ${releasePhotosFragment}
+    ${releaseTrailerFragment}
+    ${siteFragment}
+    studio {
+        id
+        name
+        slug
+        url
+    }
+  }
+`;
+
+export {
+    releaseActorsFragment,
+    releaseTagsFragment,
+    releasePosterFragment,
+    releasePhotosFragment,
+    releaseTrailerFragment,
+    releasesFragment,
+    releaseFragment,
+    siteFragment,
+};

assets/js/releases/actions.js

@@ -1,24 +1,6 @@
 import { graphql } from '../api';
-
-function curateRelease(release) {
-    const curatedRelease = {
-        ...release,
-        actors: release.actors.map(({ actor }) => ({
-            ...actor,
-            avatar: actor.avatar[0],
-            origin: actor.originCountry && {
-                country: actor.originCountry,
-            },
-        })),
-        poster: release.poster[0],
-        network: release.site.network,
-        tags: release.tags.map(({ tag }) => tag),
-    };
-
-    if (release.trailer) [curatedRelease.trailer] = release.trailer;
-
-    return curatedRelease;
-}
+import { releasesFragment, releaseFragment } from '../fragments';
+import { curateRelease } from '../curate';
 
 function initReleasesActions(_store, _router) {
     async function fetchReleases({ _commit }, { limit = 100 }) {
@@ -32,58 +14,7 @@ function initReleasesActions(_store, _router) {
 
         const { releases } = await graphql(`
             query Releases($limit:Int!) {
-              releases(first:$limit, orderBy: DATE_DESC) {
-                id
-                title
-                description
-                date
-                duration
-                createdAt
-                shootId
-                url
-                actors: actorsAssociateds {
-                  actor {
-                    id
-                    name
-                    slug
-                    birthdate
-                    age
-                    originCountry: countryByBirthCountryAlpha2 {
-                      alpha2
-                      name
-                      alias
-                    }
-                    avatar: actorsMediasByTargetId(condition: { role: "avatar" }) {
-                      thumbnail
-                    }
-                  }
-                }
-                poster: releasesMediasByTargetId(condition: { role: "poster" }) {
-                  index
-                  path
-                  thumbnail
-                }
-                tags: releasesTagsByTargetId {
-                  tag: releaseTag {
-                    name
-                    priority
-                    slug
-                    id
-                  }
-                }
-                site {
-                  id
-                  name
-                  slug
-                  url
-                  network {
-                    id
-                    name
-                    slug
-                    url
-                  }
-                }
-              }
+                ${releasesFragment}
             }
         `, {
             limit,
@@ -97,68 +28,7 @@ function initReleasesActions(_store, _router) {
 
         const { release } = await graphql(`
             query Release($releaseId:Int!) {
-              release(id: $releaseId) {
-                id
-                title
-                description
-                date
-                duration
-                createdAt
-                shootId
-                url
-                actors: actorsAssociateds {
-                  actor {
-                    id
-                    name
-                    slug
-                    birthdate
-                    age
-                    originCountry: countryByBirthCountryAlpha2 {
-                      alpha2
-                      name
-                      alias
-                    }
-                    avatar: actorsMediasByTargetId(condition: { role: "avatar" }) {
-                      thumbnail
-                    }
-                  }
-                }
-                poster: releasesMediasByTargetId(condition: { role: "poster" }) {
-                  index
-                  path
-                  thumbnail
-                }
-                photos: releasesMediasByTargetId(condition: { role: "photo" }) {
-                  index
-                  path
-                  thumbnail
-                }
-                trailer: releasesMediasByTargetId(condition: { role: "trailer" }) {
-                  index
-                  path
-                  thumbnail
-                }
-                tags: releasesTagsByTargetId {
-                  tag: releaseTag {
-                    name
-                    priority
-                    slug
-                    id
-                  }
-                }
-                site {
-                  id
-                  name
-                  slug
-                  url
-                  network {
-                    id
-                    name
-                    slug
-                    url
-                  }
-                }
-              }
+                ${releaseFragment}
             }
         `, {
             releaseId: Number(releaseId),

assets/js/tags/actions.js

@@ -1,23 +1,100 @@
-import { get } from '../api';
+import { graphql, get } from '../api';
+import {
+    releasePosterFragment,
+    releaseActorsFragment,
+    releaseTagsFragment,
+    siteFragment,
+} from '../fragments';
+import { curateRelease } from '../curate';
+
+function curateTag(tag) {
+    const curatedTag = {
+        ...tag,
+    };
+
+    if (tag.releases) curatedTag.releases = tag.releases.map(({ tagRelease }) => curateRelease(tagRelease));
+    if (tag.poster) [curatedTag.poster] = tag.poster;
+
+    return curatedTag;
+}
 
 function initTagsActions(store, _router) {
+    async function fetchTagBySlug(tagSlug) {
+        const { tagBySlug } = await graphql(`
+            query Tag($tagSlug:String!) {
+                tagBySlug(slug:$tagSlug) {
+                    id
+                    name
+                    slug
+                    description
+                    group {
+                        name
+                        slug
+                    }
+                    poster: tagsMediasByTargetId(condition: { role: "poster" }) {
+                        id
+                        thumbnail
+                        path
+                    }
+                    photos: tagsMediasByTargetId(condition: { role: "photo" }) {
+                        id
+                        thumbnail
+                        path
+                    }
+                    releases: releasesTags {
+                        tagRelease {
+                            id
+                            title
+                            date
+                            createdAt
+                            url
+                            ${releaseActorsFragment}
+                            ${releaseTagsFragment}
+                            ${releasePosterFragment}
+                            ${siteFragment}
+                        }
+                    }
+                }
+            }
+        `, {
+            tagSlug,
+        });
+
+        return curateTag(tagBySlug);
+    }
+
     async function fetchTags({ _commit }, {
-        tagId,
+        tagSlug,
         limit = 100,
-        slug,
-        group,
-        priority,
+        slugs = [],
+        _group,
+        _priority,
     }) {
-        if (tagId) {
-            return get(`/tags/${tagId}`);
+        if (tagSlug) {
+            return fetchTagBySlug(tagSlug);
         }
 
-        return get('/tags', {
+        const { tags } = await graphql(`
+            query Tags($slugs: [String!] = [], $limit: Int = 100) {
+              tags(filter: {slug: {in: $slugs}}, first: $limit) {
+                id
+                name
+                slug
+                poster: tagsMediasByTargetId(condition: { role: "poster" }) {
+                    thumbnail
+                }
+                group {
+                    name
+                    slug
+                }
+              }
+            }
+        `, {
+            slugs,
             limit,
-            slug,
-            priority,
-            group,
         });
+
+        return tags.map(tag => curateTag(tag));
     }
 
     async function fetchTagReleases({ _commit }, tagId) {
@@ -33,6 +110,7 @@ function initTagsActions(store, _router) {
     return {
         fetchTags,
         fetchTagReleases,
+        fetchTagBySlug,
     };
 }