refactor(#352): add druxt fetch and settings hooks (#353)

* refactor(#352): add druxt fetch and settings hooks * chore(#352): update tests * chore(#352): add changeset
druxt · Oct 30, 2021 · e7b1533 · e7b1533
1 parent d12dfb5
commit e7b1533
Show file tree

Hide file tree

Showing 16 changed files with 1,684 additions and 246 deletions.
diff --git a/.changeset/mighty-kiwis-accept.md b/.changeset/mighty-kiwis-accept.md
@@ -0,0 +1,11 @@
+---
+"druxt-blocks": minor
+"druxt-breadcrumb": minor
+"druxt": minor
+"druxt-entity": minor
+"druxt-menu": minor
+"druxt-site": minor
+"druxt-views": minor
+---
+
+Refactored DruxtModule fetch hooks
diff --git a/packages/blocks/src/components/DruxtBlock.vue b/packages/blocks/src/components/DruxtBlock.vue
@@ -55,43 +55,6 @@ export default {
     resource: {},
   }),
 
-  /**
-   * The Nuxt Fetch hook.
-   *
-   * Fetches the Block JSON:API resource by either UUID or ID.
-   */
-  async fetch() {
-    // Build query.
-    const type = 'block--block'
-    const query = new DrupalJsonApiParams()
-
-    const fields = ((this.$druxt.settings.blocks || {}).query || {}).fields
-    if (Array.isArray(fields)) {
-      query.addFields(type, [
-        ...fields,
-        'plugin',
-        'region',
-        'settings',
-        'theme',
-      ])
-    }
-
-    // Fetch Block by UUID.
-    if (this.uuid) {
-      const id = this.uuid
-      this.resource = await this.getResource({ type, id, query })
-    }
-
-    // Fetch Block by Drupal internal ID.
-    else if (this.id) {
-      query.addFilter('drupal_internal__id', this.id)
-      const collection = await this.getCollection({ type, query })
-      this.resource = { data: collection.data[0] }
-    }
-
-    await DruxtModule.fetch.call(this)
-  },
-
   fetchKey(getCounter) {
     const parts = ['DruxtBlock', this.uuid || this.id].filter((o) => o)
     return [...parts, getCounter(parts.join(':'))].join(':')
@@ -147,6 +110,39 @@ export default {
       return componentOptions
     },
 
+    /**
+     * Fetches the Block JSON:API resource by either UUID or ID.
+     */
+    async fetchConfig() {
+      // Build query.
+      const type = 'block--block'
+      const query = new DrupalJsonApiParams()
+
+      const fields = ((this.$druxt.settings.blocks || {}).query || {}).fields
+      if (Array.isArray(fields)) {
+        query.addFields(type, [
+          ...fields,
+          'plugin',
+          'region',
+          'settings',
+          'theme',
+        ])
+      }
+
+      // Fetch Block by UUID.
+      if (this.uuid) {
+        const id = this.uuid
+        this.resource = await this.getResource({ type, id, query })
+      }
+
+      // Fetch Block by Drupal internal ID.
+      else if (this.id) {
+        query.addFilter('drupal_internal__id', this.id)
+        const collection = await this.getCollection({ type, query })
+        this.resource = { data: collection.data[0] }
+      }
+    },
+
     /**
      * Provides propsData for the DruxtWrapper.
      *

diff --git a/packages/blocks/src/components/DruxtBlockRegion.vue b/packages/blocks/src/components/DruxtBlockRegion.vue
@@ -57,27 +57,6 @@ export default {
     blocks: []
   }),
 
-  /**
-   * The Nuxt Fetch hook.
-   *
-   * Fetches all blocks by region and theme.
-   */
-  async fetch() {
-    const type = 'block--block'
-    const query = new DrupalJsonApiParams()
-    query
-      .addFilter('region', this.name)
-      .addFilter('status', '1')
-      .addFilter('theme', this.theme)
-      .addSort('weight')
-      .addFields(type, ['drupal_internal__id', 'visibility', 'weight'])
-
-    const collection = await this.getCollection({ type, query })
-    this.blocks = collection.data
-
-    await DruxtModule.fetch.call(this)
-  },
-
   fetchKey(getCounter) {
     const parts = ['DruxtBlockRegion', this.name].filter((o) => o)
     return [...parts, getCounter(parts.join(':'))].join(':')
@@ -145,6 +124,23 @@ export default {
      */
     componentOptions: ({ name, theme }) => [[name, theme], ['default']],
 
+    /**
+     * Fetches all blocks by region and theme.
+     */
+    async fetchConfig() {
+      const type = 'block--block'
+      const query = new DrupalJsonApiParams()
+      query
+        .addFilter('region', this.name)
+        .addFilter('status', '1')
+        .addFilter('theme', this.theme)
+        .addSort('weight')
+        .addFields(type, ['drupal_internal__id', 'visibility', 'weight'])
+
+      const collection = await this.getCollection({ type, query })
+      this.blocks = collection.data
+    },
+
     /**
      * Provides propsData for the DruxtWrapper.
      *

diff --git a/packages/breadcrumb/src/components/DruxtBreadcrumb.vue b/packages/breadcrumb/src/components/DruxtBreadcrumb.vue
@@ -29,18 +29,6 @@ export default {
     }
   },
 
-  /**
-   * The Nuxt Fetch hook.
-   *
-   * Fetches the breadcrumbs.
-   */
-  async fetch() {
-    if (!this.value) {
-      await this.fetchCrumbs()
-    }
-    await DruxtModule.fetch.call(this)
-  },
-
   /** */
   computed: {
     /**
@@ -136,6 +124,15 @@ export default {
      */
     componentOptions: () => [['default']],
 
+    /**
+     * Fetches the breadcrumbs.
+     */
+    async fetchConfig() {
+      if (!this.value) {
+        await this.fetchCrumbs()
+      }
+    },
+
     /**
      * Provides propsData for the DruxtWrapper.
      *

diff --git a/packages/druxt/src/components/DruxtModule.vue b/packages/druxt/src/components/DruxtModule.vue
@@ -91,19 +91,34 @@ export default {
       return false
     }
 
+    // Fetch configuration.
+    if ((this.$options.druxt || {}).fetchConfig) {
+      await this.$options.druxt.fetchConfig.call(this)
+    }
+
     // Build wrapper component object.
     const options = this.getModuleComponents()
     let component = {
       is: (((options.filter(o => o.global) || [])[0] || {}).name || 'DruxtWrapper'),
       options: options.map(o => o.name) || [],
     }
 
-    // Get scoped slots.
-    component.slots = Object.keys(this.getScopedSlots())
-
     // Get wrapper data.
     const wrapperData = await this.getWrapperData(component.is)
+
+    // Build module settings.
     component.settings = wrapperData.druxt || {}
+    if ((this.$options.druxt || {}).settings) {
+      component.settings = this.$options.druxt.settings(this, component.settings)
+    }
+
+    // Fetch resource.
+    if ((this.$options.druxt || {}).fetchData) {
+      await this.$options.druxt.fetchData.call(this, component.settings)
+    }
+
+    // Get scoped slots.
+    component.slots = Object.keys(this.getScopedSlots())
 
     // Build wrapper component propsData.
     component = { ...component, ...this.getModulePropsData(wrapperData.props) }

diff --git a/packages/druxt/test/components/DruxtModule.test.js b/packages/druxt/test/components/DruxtModule.test.js
@@ -133,7 +133,10 @@ describe('DruxtModule component', () => {
       extends: DruxtModule,
       druxt: {
         componentOptions: () => ([['wrapper']]),
+        async fetchConfig() {},
+        async fetchData(settings) {},
         propsData: () => ({ foo: 'bar' }),
+        settings: ({}, settings) => ({ ...settings, custom: true }),
         slots: (h) => ({ default: () => h('div', ['test'] )}),
       }
     }
@@ -148,7 +151,7 @@ describe('DruxtModule component', () => {
       options: ['CustomModuleWrapper'],
       props: { foo: 'bar' },
       propsData: { foo: 'bar' },
-      settings: { foo: 'bar' },
+      settings: { foo: 'bar', custom: true },
       slots: ['default'],
     })
 

diff --git a/packages/entity/src/components/DruxtEntity.vue b/packages/entity/src/components/DruxtEntity.vue
@@ -84,49 +84,6 @@ export default {
     schema: null,
   }),
 
-  /**
-   * Nuxt.js fetch method.
-   */
-  async fetch() {
-    // Fetch Schema.
-    try {
-      this.schema = await this.getSchema({
-        resourceType: this.type,
-        mode: this.mode,
-        schemaType: this.schemaType || 'view',
-      })
-    } catch(e) {
-      // TODO: Handle error
-    }
-
-    // Build wrapper component object.
-    const options = this.getModuleComponents()
-    let component = {
-      is: (((options.filter(o => o.global) || [])[0] || {}).name || 'DruxtWrapper'),
-      options: options.map(o => o.name) || [],
-    }
-
-    // Get wrapper component data to merge with module settings.
-    const wrapperData = await this.getWrapperData(component.is)
-    component.settings = merge(this.$druxt.settings.entity || {}, wrapperData.druxt || {}, { arrayMerge: (dest, src) => src })
-
-    // Fetch Entity resource.
-    if (this.uuid && !this.value) {
-      const query = this.getQuery(component.settings)
-      const entity = (await this.getResource({ type: this.type, id: this.uuid, query })).data
-      this.model = JSON.parse(JSON.stringify(entity || {}))
-    }
-
-    // Get scoped slots.
-    component.slots = Object.keys(this.getScopedSlots())
-
-    // Build wrapper component propsData.
-    component = { ...component, ...this.getModulePropsData(wrapperData.props) }
-
-    // Set component data.
-    this.component = component
-  },
-
   fetchKey(getCounter) {
     const parts = ['DruxtEntity', this.type, this.uuid, this.mode, this.schemaType].filter((o) => o)
     return [...parts, getCounter(parts.join(':'))].join(':')
@@ -256,6 +213,32 @@ export default {
       [((schema || {}).config || {}).mode || mode],
     ]),
 
+    /**
+     * Fetch Schema.
+     */
+    async fetchConfig() {
+      try {
+        this.schema = await this.getSchema({
+          resourceType: this.type,
+          mode: this.mode,
+          schemaType: this.schemaType || 'view',
+        })
+      } catch(e) {
+        // TODO: Handle error
+      }
+    },
+
+    /**
+     * Fetch Entity resource.
+     */
+    async fetchData(settings) {
+      if (this.uuid && !this.value) {
+        const query = this.getQuery(settings)
+        const entity = (await this.getResource({ type: this.type, id: this.uuid, query })).data
+        this.model = JSON.parse(JSON.stringify(entity || {}))
+      }
+    },
+
     /**
      * Provides propsData for the DruxtWrapper.
      *
@@ -264,6 +247,16 @@ export default {
      */
     propsData: ({ fields, model, schema }) => ({ entity: model, fields, schema, value: model }),
 
+    /**
+     * Component settings.
+     */
+    settings: ({ $druxt }, wrapperSettings) => {
+      const settings = merge($druxt.settings.entity || {}, wrapperSettings, { arrayMerge: (dest, src) => src })
+      return {
+        query: settings.query || {},
+      }
+    },
+
     /**
      * Provides the scoped slots object for the Module render function.
      *

diff --git a/packages/entity/test/components/DruxtEntity.test.js b/packages/entity/test/components/DruxtEntity.test.js
@@ -83,9 +83,7 @@ describe('DruxtEntity', () => {
       'DruxtEntityNodePage',
       'DruxtEntityDefault',
     ])
-    expect(wrapper.vm.component.props).toStrictEqual({
-      value: expect.any(Object)
-    })
+    expect(wrapper.vm.component.props).toStrictEqual({})
     expect(Object.keys(wrapper.vm.component.propsData)).toStrictEqual([
       'entity', 'fields', 'schema', 'value',
     ])