DRY: persistentLink implementation

cypress/integration/common/search.js

@@ -47,8 +47,8 @@ Then("I should be on the post's page", () => {
     '/post/'
   )
   cy.location('pathname').should(
-    'contain',
-    '/101-essays-that-will-change-the-way-you-think'
+    'eq',
+    '/post/p1/101-essays-that-will-change-the-way-you-think'
   )
 })
 

webapp/mixins/persistentLinks.js

@@ -0,0 +1,32 @@
+export default function(options = {}) {
+  const { queryId, querySlug, path, message = 'Page not found.' } = options
+  return {
+    asyncData: async context => {
+      const {
+        params: { id, slug },
+        redirect,
+        error,
+        app: { apolloProvider }
+      } = context
+      const idOrSlug = id || slug
+
+      const variables = { idOrSlug }
+      const client = apolloProvider.defaultClient
+
+      let response
+      let thing
+      response = await client.query({ query: queryId, variables })
+      thing = response.data[Object.keys(response.data)[0]][0]
+      if (thing && thing.slug === slug) return // all good
+      if (thing && thing.slug !== slug) {
+        return redirect(`/${path}/${thing.id}/${thing.slug}`)
+      }
+
+      response = await client.query({ query: querySlug, variables })
+      thing = response.data[Object.keys(response.data)[0]][0]
+      if (thing) return redirect(`/${path}/${thing.id}/${thing.slug}`)
+
+      return error({ statusCode: 404, message })
+    }
+  }
+}

webapp/pages/post/_id.vue

@@ -18,25 +18,32 @@
 
 <script>
 import gql from 'graphql-tag'
+import PersistentLinks from '~/mixins/persistentLinks.js'
 
-const queryId = gql`
-  query($idOrSlug: ID) {
-    Post(id: $idOrSlug) {
-      id
-      slug
+const options = {
+  queryId: gql`
+    query($idOrSlug: ID) {
+      Post(id: $idOrSlug) {
+        id
+        slug
+      }
     }
-  }
-`
-const querySlug = gql`
-  query($idOrSlug: String) {
-    Post(slug: $idOrSlug) {
-      id
-      slug
+  `,
+  querySlug: gql`
+    query($idOrSlug: String) {
+      Post(slug: $idOrSlug) {
+        id
+        slug
+      }
     }
-  }
-`
+  `,
+  path: 'post',
+  message: 'This post could not be found'
+}
+const persistentLinks = PersistentLinks(options)
 
 export default {
+  mixins: [persistentLinks],
   computed: {
     routes() {
       const { slug, id } = this.$route.params
@@ -69,34 +76,6 @@ export default {
         }
       ]
     }
-  },
-  async asyncData(context) {
-    const {
-      params: { id, slug },
-      redirect,
-      error,
-      app: { apolloProvider }
-    } = context
-    const idOrSlug = id || slug
-
-    const variables = { idOrSlug }
-    const client = apolloProvider.defaultClient
-
-    let response
-    let post
-    response = await client.query({ query: queryId, variables })
-    post = response.data.Post[0]
-    if (post && post.slug === slug) return // all good
-    if (post && post.slug !== slug) {
-      return redirect(`/post/${post.id}/${post.slug}`)
-    }
-
-    response = await client.query({ query: querySlug, variables })
-    post = response.data.Post[0]
-    if (post) return redirect(`/post/${post.id}/${post.slug}`)
-
-    const message = 'This post could not be found'
-    return error({ statusCode: 404, message })
   }
 }
 </script>

webapp/pages/profile/_id.vue

@@ -4,52 +4,31 @@
 
 <script>
 import gql from 'graphql-tag'
+import PersistentLinks from '~/mixins/persistentLinks.js'
 
-const queryId = gql`
-  query($idOrSlug: ID) {
-    User(id: $idOrSlug) {
-      id
-      slug
+const options = {
+  queryId: gql`
+    query($idOrSlug: ID) {
+      User(id: $idOrSlug) {
+        id
+        slug
+      }
     }
-  }
-`
-const querySlug = gql`
-  query($idOrSlug: String) {
-    User(slug: $idOrSlug) {
-      id
-      slug
+  `,
+  querySlug: gql`
+    query($idOrSlug: String) {
+      User(slug: $idOrSlug) {
+        id
+        slug
+      }
     }
-  }
-`
+  `,
+  message: 'This user could not be found',
+  path: 'profile'
+}
+const persistentLinks = PersistentLinks(options)
 
 export default {
-  async asyncData(context) {
-    const {
-      params: { id, slug },
-      redirect,
-      error,
-      app: { apolloProvider }
-    } = context
-    const idOrSlug = id || slug
-
-    const variables = { idOrSlug }
-    const client = apolloProvider.defaultClient
-
-    let response
-    let user
-    response = await client.query({ query: queryId, variables })
-    user = response.data.User[0]
-    if (user && user.slug === slug) return // all good
-    if (user && user.slug !== slug) {
-      return redirect(`/profile/${user.id}/${user.slug}`)
-    }
-
-    response = await client.query({ query: querySlug, variables })
-    user = response.data.User[0]
-    if (user) return redirect(`/profile/${user.id}/${user.slug}`)
-
-    const message = 'This user could not be found'
-    return error({ statusCode: 404, message })
-  }
+  mixins: [persistentLinks]
 }
 </script>