Merge pull request #103 from unimal-jp/update-content

Add content-type-id props to spearly-content

README.md

@@ -20,8 +20,6 @@ $ npm i -S @spearly/nuxt-module
 $ yarn add @spearly/nuxt-module
 ```
 
-#### 
-
 ### Setup
 
 #### nuxt.config.(j|t)s
@@ -165,9 +163,12 @@ export default {}
 
 ### Content
 
+> **Warning**
+> `content-type-id` props have been required since v0.10.0
+
 ```vue
 <template>
-  <spearly-content id="CONTENT_PUBLIC_UID">
+  <spearly-content content-type-id="CONTENT_TYPE_ID" id="CONTENT_PUBLIC_UID">
     <template v-slot="content">
       <header>
         <h1>{{ content.values.title }}</h1>
@@ -192,7 +193,7 @@ Specify a component name for `loading` prop.
 
 ```vue
 <template>
-  <spearly-content loading="Loading" id="CONTENT_PUBLIC_UID">
+  <spearly-content loading="Loading" content-type-id="CONTENT_TYPE_ID" id="CONTENT_PUBLIC_UID">
     <template v-slot="content">
       <header>
         <h1>{{ content.values.title }}</h1>
@@ -213,7 +214,7 @@ You can preview the draft content by specifying `preview-token` and `id`.
 
 ```vue
 <template>
-  <spearly-content :id="$route.query.content_id" :preview-token="$route.query.preview_token">
+  <spearly-content content-type-id="CONTENT_TYPE_ID" :id="$route.query.content_id" :preview-token="$route.query.preview_token">
     <template v-slot="content">
       <header>
         <h1>{{ content.values.title }}</h1>

package.json

@@ -70,7 +70,7 @@
   },
   "dependencies": {
     "@nuxt/types": "^2.15.7",
-    "@spearly/sdk-js": "^1.3.3",
+    "@spearly/sdk-js": "^2.0.0",
     "@types/node-fetch": "^2.5.12",
     "@vue/compiler-sfc": "^3.2.2",
     "node-fetch": "^2.6.1",

src/components/spearly-content.vue

@@ -16,6 +16,7 @@ import type { Content, GetContentParams } from '@spearly/sdk-js'
 
 export type Props = {
   id: string
+  contentTypeId: string
   previewToken?: string
   loading?: string
   patternName?: 'a' | 'b'
@@ -35,6 +36,7 @@ export type Data = {
 export default Vue.extend<Data, unknown, unknown, Props>({
   props: {
     id: { type: String, required: true },
+    contentTypeId: { type: String, required: true },
     loading: { type: String },
     previewToken: { type: String },
     patternName: { type: String as PropType<'a' | 'b'> },
@@ -69,11 +71,15 @@ export default Vue.extend<Data, unknown, unknown, Props>({
         params.patternName = this.$props.patternName
       }
 
-      const res = await this.$spearly.getContent(this.$props.id, params)
+      const res = await this.$spearly.getContent(this.$props.contentTypeId, this.$props.id, params)
       this.content = res
       this.isLoaded = true
     } else {
-      const res = await this.$spearly.getContentPreview(this.$props.id, this.$props.previewToken)
+      const res = await this.$spearly.getContentPreview(
+        this.$props.contentTypeId,
+        this.$props.id,
+        this.$props.previewToken
+      )
       this.content = res
       this.isLoaded = true
     }

src/specs/components/spearly-content.spec.ts

@@ -9,6 +9,7 @@ describe('SpearlyContent', () => {
     pageViewMock = jest.fn()
     wrapper = shallowMount(SpearlyContent, {
       propsData: {
+        contentTypeId: 'CONTENT_TYPE_ID',
         id: 'CONTENT_ID',
       },
       mocks: {