Nuxtjs-apollo-explicit NPM

This is a modified version of apollo-module.

Example

export default {
  data() {
    return {
      article: null,
    }
  },
  async fetch({app, error, isServer}) {
    if (isServer) {
      const result = await app.apolloPrefetch(this)
      if (!result.article.data.article) {
        error({statusCode: 404, message: "Article Not Found"})
      }
    }
  },
  apollo: {
    article: {
      query: articlesQuery,
      update (data) { return data.Article; },
      result (result) {
        if (!result.data.article) {
          this.$root.error({statusCode: 404, message: "Article Not Found"})
        }
      },
      variables() { return { id: this.$route.params.id } },
      prefetch({ route }) { return { id: route.params.id } },
    }
  },
}

The problems of the original apollo-module

How the original apollo-module works:

[Nuxt] Nuxt's asyncData/fetch
↓
[Nuxt] await
↓
[Nuxt] check if error/redirect flags are set
↓
Apollo prefetch
(It's too late to call Nuxt's error and redirect method)
↓
[Nuxt] second await
(A concurrency issue could occur if you use both asyncData/fetch and Apollo prefetch)
↓
...

How this module works:

[Nuxt] Nuxt's asyncData/fetch (you should call the Apollo prefetch explicitly inside it)
↓
[Nuxt] await
↓
[Nuxt] check if error/redirect flags are set
↓
...