[toast] support this.$error in SSR context

[srghma]

i have installed @nuxtjs/toast (nuxt version - 1.0.0-alpha.5) and i have exception, but only in terminal, on in browser, because ... full code here

export default {
  data () {
    console.log(this.$error) // function in browser console, undefined in terminal
    return {
      loading: 0
    }
  },
  apollo: {
    allCars: {
      query: gql`query {
        projects {
          name
        }
      }`,
      loadingKey: 'loading',
      error (error) {
        console.log(this.loading) // defined everywhere
        console.log(this.$error) // function in browser console, undefined in terminal
        console.log(error)
        // this.$error(error.message) // critical error here, but not in browser
      }
    }
  }
}

_{This feature request is available on Nuxt.js community (#c55)}

[pi0]

Hi. The error section of apollo seems not a part of vue instance. Would you please check what is exactly this inside console function?

[srghma]

its VueComponent

this.$error is undefined because ssr: false here

I think it can be handled with something like ... but it's weird

      error (error) {
        if (process.brower) {
          this.$error(error.message)
        } else {
          console.log(error.message)
        }
      }

[pi0]

But toast useless for SSR. We could redirect to console as an enhancement but the hard part is it should be removed from SSR bundle.

[srghma]

would like to see

or page can be rendered with toast notification (can it?)

[pi0]

That's a good idea too.We need somehow inject state into window.__NUXT and retrieve it after rehydration.

[srghma]

seems like work for https://github.com/ktsn/vuex-toast

[srghma]

thing is that I dont understand why with this config (with-apollo, old nuxt)

import Vue from 'vue'
import { ApolloClient, createNetworkInterface } from 'apollo-client'
import 'isomorphic-fetch'

// Created with Graphcool - https://www.graph.cool/
const API_ENDPOINT = 'https://api.graph.cool/simple/v1/cj1dqiyvqqnmj0113yuqamkuu'

const apolloClient = new ApolloClient({
  networkInterface: createNetworkInterface({
    uri: API_ENDPOINT,
    transportBatching: true
  })
})

export default apolloClient

application make only one request to api, on server side

and with my config (new nuxt)

import Vue from 'vue'
import VueApollo from 'vue-apollo'
import { ApolloClient, createNetworkInterface } from 'apollo-client'

Vue.use(VueApollo)

function createClient (ctx) {
  const { isDev, isClient } = ctx

  const networkInterface = createNetworkInterface({
    uri: `${process.env.API_URL}/graphql`,
    // uri: 'https://api.graph.cool/simple/v1/cj1dqiyvqqnmj0113yuqamkuu',
    transportBatching: true
  })

  return new ApolloClient({
    networkInterface,
    connectToDevTools: isDev && isClient,
    ssrMode: !isClient
  })
}

export default (ctx) => {
  const { app } = ctx

  // if part dont work
  if (!app.apolloProvider) {
    app.apolloProvider = new VueApollo({
      defaultClient: createClient(ctx)
    })
  }
}

application makes two requests to api, one - on page rendering on server side, and one in browser
and how to avoid this

P.S. I desperately need vue-apollo example with new nuxt 😭

[Atinux]

@BjornMelgaard We are working with @pi0 on making vue-apollo work with Nuxt 1.0 out of the box :)

[srghma]

I know, and I wish you all the best in your affairs, I love you guys!!!