Nuxt.js Resource Module

⚠️Alpha version

Status

Features

• @nuxtjs/axiosをラップした HTTP リクエストモジュール
• asyncData と fetch でリクエストしたリクエストを遷移後まで遅延させられます
  • リンクをクリックしてすぐに遷移します
  • 遷移後リクエストを行い、response.data をそのまま data プロパティにマッピングします
  • SSR 時は遅延させずにそのままリクエストします
• キャンセル可能なリクエストを簡単に作れます
  • 遷移するときはリクエスト中のリクエストを自動でキャンセルします
• リクエスト時にレスポンスを加工する処理を追加できます
• 内部でエラーハンドリングしているので使うときにエラーが投げられることはありません

• HTTP request module wrapping @nuxtjs/axios
• AsyncData and fetch requested requests can be delayed until after transition
  • Immediate transition
  • Make a request after the transition and map response.data to the data property
  • When requesting SSR, do not delay but request as is
• Easily create cancelable requests
  • When making a transition, cancel request in request automatically
• You can add a process to modify the response on request
• Since error handling is done internally, no error is thrown when using

Install

$ yarn add nuxt-resource-module

nuxt.config.js

module.exports = {
  // ...
  modules: [
    'nuxt-resource-module', // required before @nuxtjs/axios
    '@nuxtjs/axios',
  ],
  // ...

  // options (See options section)
  'resource-module': {
    methods: ['get', 'post'],
  },
};

Usage

export default {
  // asyncData
  async asyncData({ app, error }) {
    // default request
    const response = await app.$_resource.get({
      url: '/users',
    });

    // delay request
    const response = await app.$_resource.delay.get({
      url: '/users',
      // response
      processor(response: ResourceResponse) {
        if (response.status !== 200) {
          error({ statusCode: response.status, message: 'Request error' })
        }
        return response;
      },

      // response.data mapper (after processor)
      dataMapper(response: ResourceResponse) {
        const { delayed, data } = response;
        return delayed ? { users: [] } : { users: data.users };
      },
    });
  },

  // methods
  methods: {
    // cancel
    async searchUser() {
      this.$_resource.cancel('/users/search');
      const response = await this.$_resource.mayBeCancel.get({ url: '/users/search' });
      if (response.canceled === true) {
        // when cancel
      }
    },
  },
}

// Vuex
export const actions = {
  async searchUser() {
      this.$_resource.cancel('/users/search');
      const response = await this.$_resource.mayBeCancel.get({ url: '/users/search' });
      if (response.canceled === true) {
        // when cancel
      }
  }
}

API

Methods

Request methods

Default request methods

• $_resource.request(config: ResourceRequestConfig)
• $_resource.get(config: ResourceRequestConfig)
• $_resource.delete(config: ResourceRequestConfig)
• $_resource.head(config: ResourceRequestConfig)
• $_resource.post(config: ResourceRequestConfig)
• $_resource.put(config: ResourceRequestConfig)
• $_resource.patch(config: ResourceRequestConfig)

Delay request methods

クライアントとサーバーで動作が変わります。
There are client and server behavior changes.

client: asyncData または fetch で利用した場合は、遷移が確定してからリクエストが呼ばれます。
server: デフォルトメソッドを使ったときと同じです。使ったときにそのままリクエストを送ります。

client: When used with asyncData or fetch, it is called after the transition is confirmed.
server: Same as default method. Send a request when called.

• $_resource.delay.request(config: ResourceRequestConfig)
• $_resource.delay.get(config: ResourceRequestConfig)
• $_resource.delay.delete(config: ResourceRequestConfig)
• $_resource.delay.head(config: ResourceRequestConfig)
• $_resource.delay.post(config: ResourceRequestConfig)
• $_resource.delay.put(config: ResourceRequestConfig)
• $_resource.delay.patch(config: ResourceRequestConfig)

May be cancel request methods

キャンセル可能なリクエストになります。$_resource.cancel()と一緒に使います。
It will be a request that can be canceled. Use with $_resource.cancel().

• $_resource.mayBeCancel.request(config: ResourceRequestConfig)
• $_resource.mayBeCancel.get(config: ResourceRequestConfig)
• $_resource.mayBeCancel.delete(config: ResourceRequestConfig)
• $_resource.mayBeCancel.head(config: ResourceRequestConfig)
• $_resource.mayBeCancel.post(config: ResourceRequestConfig)
• $_resource.mayBeCancel.put(config: ResourceRequestConfig)
• $_resource.mayBeCancel.patch(config: ResourceRequestConfig)

Cancel methods

• $_resource.cancel(url: ResourceRequestConfig.url)
• $_resource.cancelAll()
  • Automatically call with beforeEach

Delay methods

• $_resource.requestDelayedRequest()
  • Request all delayed requests
  • Automatically call within the next function of beforeRouteEnter.
• $_resource.clearDelayedRequest()
  • Clear all delayed requests
  • Automatically call with beforeEach

Extending methods

• $_resource.setEachProcessor(fn: Function)

Types

ResourceRequestConfig

Extends AxiosRequestConfig

export interface ResourceRequestConfig extends AxiosRequestConfig {
  url: string;
  processor?: (response: ResourceResponse) => any;
  dataMapper?: (response: ResourceResponse) => any;
}

e.g.

{
  url: '/users/search',  // require
  params: { // Can also use axios config
    query: 'Alice',
  },
  processor(response) { // option
    if (response.status !== 200) {
      error({ statusCode: response.status, message: 'Request error' })
    }
    return response;
  },
  dataMapper(response) {  // option
    const { delayed, data } = response;
    return delayed ? { users: [] } : { users: data.users };
  },
}

ResourceResponse

Extends AxiosResponse

export interface ResourceResponse extends AxiosResponse {
  canceled: boolean;
  delayed: boolean;
}

Extending

Each processor

plubins/resource-module.js

export default ({ app }) => {
  const { $_resource } = app;
  const eachProcessor = (response) => {
    return {
      status: response.status,
      isError: response.status !== 200,
      data: response.data,
      delayed: response.delayed,
      canceled: response.canceled,
    };
  };
  $_resource.setEachProcessor(eachProcessor);
};

nuxt.config.js

module.exports = {
  // ...
  modules: [
    'nuxt-resource-module', // required before @nuxtjs/axios
    '@nuxtjs/axios',
  ],
  // ...

  plugins: [
    '~/plugins/resource-module',
  ],
};

application code

export default {
  async asyncData({ app }) {
    const response = await app.$_resource.get({
      url: '/users',
    });
    console.log(response) // { status: 200, isError: false, data: ... }
  },
};

Options

methods

• Default: ['get', 'delete', 'head', 'post', 'put', 'patch']

使うリクエストメソッドを定義できます。

e.g.

// nuxt.config.js
module.exports = {
  // ...
  'resource-module': {
    methods: ['get'],
  },
};

When

async asyncData({ app }) {
  // ok
  const response = await app.$_resource.get({
    url: '/users',
  });

  // undefined
  const response = await app.$_resource.post({
    url: '/users',
    data: {
      name: 'new user',
    },
  });
},