Nuxt.js: Integration vue-apollo

[jvbianchi]

The new version of vue-apollo (https://github.com/Akryum/vue-apollo#create-a-provider) needs to set up a provider:

const apolloProvider = new VueApollo({
  defaultClient: apolloClient,
})

new Vue({
  el: '#app',
  apolloProvider, // <---- provider
  render: h => h(App),
})

How can I do this using nuxt?

_{This question is available on Nuxt.js community (#c437)}

[jvbianchi]

From what I saw in your documentation today this is not possible. Right?

[evseevnn-zz]

Hi @jvbianchi
You can use lokka
i'm already used it with vue + ssr. I think setup it will easy.
Your will need create file where you should describe your GraphQL api, and after your can link this with nuxt via plugin.

VueApollo heavy library because pull the apollo. Better use lokka for make your frontend part small.
P.S. i think your will need also install node-fetch because lokka use native browser fetch.

[dohomi]

@jvbianchi I am adding the provider of vue-apollo currently in a global Vue.mixin and works like this:

plugins/

import VueApollo from 'vue-apollo';
import {apolloClient} from './apolloClient';

const apolloProvider = new VueApollo({
    defaultClient: apolloClient,
})
Vue.mixin({
    apolloProvider,
(...)
})

Not sure if this is the right way though..

[stursby]

@jvbianchi I just submitted an example with apollo-client #553. You can see a demo here.

[jvbianchi]

@stursby That helps thanks

[Atinux]

It will be possible soon to use vue-apollo :)

On Tue, 11 Apr 2017 at 20:23, Victor [e-mail] wrote:

@stursby https://github.com/stursby That helps thanks

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/nuxt/nuxt.js/issues/504#issuecomment-293355656, or mute
the thread
https://github.com/notifications/unsubscribe-auth/AA3OFBaxu0rFkaoWwMn7ow8oV2H0X_l5ks5ru8UDgaJpZM4Mx804
.

[dohomi]

@Atinux it crossed my mind, if the vue-apollo package would expose this.$apollo.query, then users could use that approach inside of the asyncData and it would be ready to use?
The current problem is, that:

export default{
  apollo:{
    someQuery:{...}
  }
}

fails in client/server hydration

[Atinux]

I am working with the creator of vue-apollo to find a way of doing it.

[jvbianchi]

Using this example: vue-apollo

I'm getting this error:

TypeError: Cannot read property '_ready' of undefined

[dohomi]

@Atinux I was looking at the vue-apollo example as well. Two questions so far:

• its really necessary to use a server.js?
• I don't find see where you inject the initialState based on this whitepaper: https://github.com/Akryum/vue-apollo/blob/master/ssr.js

I know its WIP just wanted to chip in and ask if there is anything I could try further

[dohomi]

@jvbianchi if you disable the middleware at nuxt.config.js at least you won't have this error any longer. Thus the initial state still won't work correctly but the data will be fetched again

[tillkolter]

@Atinux I am currently trying to migrate my Non-Nuxt project (which uses vue-apollo) to Nuxt. I used your example to migrate it, but it seems that I am missing something and I think the provided example is missing something. The apollo middleware method fires every time the call to render is being made, but the result of apolloClient.collect is empty. I expected it to contain all apollo queries along the rendering path. Instead, the apollo queries are being executed after the page has been mounted, just like in the Non-Nuxt version. The expected file pages/cars/_id.vue also does not exist.

Unfortunately the white paper referenced in the original SSR example in https://github.com/Akryum/vue-apollo#server-side-rendering also lacks information about the actual rendering and how the __APOLLO_STATE__ is added to the response and I couldn't make my way through the Nuxt implementation magic to see how to extend the rendering part myself.

The apollo client example https://github.com/nuxt/nuxt.js/tree/master/examples/with-apollo works fine, so I could restructure my code to use plain apollo-client instead of the convenient wrapper vue-apollo, but I would like to avoid restructuring this part of my app.

[Akryum]

Work is being done to make vue-apollo more SSR friendly and to make the integration with nuxt easier.

[tillkolter]

@akryum Sounds great. Can you estimate how much time it will take until a beta/alpha is ready? I am coming closer to a deadline and I would use the working apollo-client version otherwise and rebuild the vue-apollo part later then. Sorry for pushing :)

[Akryum]

I hope releasing new SSR features in the beginning of the week.

[rnenjoy]

Wow!! Can't wait!

[dohomi]

@Atinux are there any news on this issue? After the release of beta.7 of vue-apollo is there another way of making the implementation right? I still struggle to set the initialState right. Thanks

[dohomi]

@jvbianchi did you find a proper way using vue-apollo yet?

[jvbianchi]

just this one: https://github.com/nuxt/nuxt.js/blob/master/examples/vue-apollo/README.md

[dohomi]

thanks I've seen that one but there is no info yet

[Atinux]

Will try to make the example work soon.

[RSchwan]

Any news on this? I really want to use graphql and nuxt together but I can't get it working.

[tillkolter]

I could not get it running either and ended up using the vanilla apollo client example instead.

[dohomi]

Anybody here had success with adding websocket subscription with apollo client?

[frankspin89]

@Atinux is there any progress. Really looking forward for a example.

[srghma]

looking too for example with vue-apollo's prefetch and initialState, any news? :smile:

[pi0]

(Copied from #1088 - Error with with-apollo example)

Nuxt.js Error:

TypeError: Cannot read property 'collect' of undefined
    at _callee$ (middleware/apollo.js:3:39)
    at tryCatch (F:\dev\nuxt\vue-apollo\node_modules\regenerator-runtime\runtime.js:65:40)
    at Generator.invoke [as _invoke] (F:\dev\nuxt\vue-apollo\node_modules\regenerator-runtime\runtime.js:303:22)
    at Generator.prototype.(anonymous function) [as next] (F:\dev\nuxt\vue-apollo\node_modules\regenerator-runtime\runtime.js:117:21)
    at step (~/babel-runtime/helpers/asyncToGenerator.js:17:0)
    at server-bundle.js:246:14
    at F (F:\dev\nuxt\vue-apollo\node_modules\core-js\library\modules\_export.js:35:28)
    at server-bundle.js:225:12
    at server-bundle.js:1655:18
    at promisify (.nuxt/utils.js:117:14)
    at middlewareSeries (.nuxt/utils.js:97:9)
    at Object._callee$ (.nuxt/server.js:80:27)
    at tryCatch (F:\dev\nuxt\vue-apollo\node_modules\regenerator-runtime\runtime.js:65:40)
    at Generator.invoke [as _invoke] (F:\dev\nuxt\vue-apollo\node_modules\regenerator-runtime\runtime.js:303:22)
    at Generator.prototype.(anonymous function) [as next] (F:\dev\nuxt\vue-apollo\node_modules\regenerator-runtime\runtime.js:117:21)
    at step (~/babel-runtime/helpers/asyncToGenerator.js:17:0)

[pi0]

An update: Sorry everyone for the delay for this integration, we are really intereste in Official Apollo + Nuxt too. But resources including time is limited and currently preparing Docs for sooner 1.x release is a high priority. Then we can even have an official one liner Integration using new Modular system.

[Nainterceptor]

Hi guys,

Just submitted a PR (#1160), with a working sample, but may be not the right way.
Comments are welcome.

[Atinux]

I worked with Akryum (author of vue-apollo), and the example has been updated and fully working: https://github.com/nuxt/nuxt.js/tree/dev/examples/vue-apollo

[evseevnn-zz]

@Atinux respect

[srghma]

From me too, to all team :+1: :100:

[ImTheDeveloper]

Seems to not be working for me:

This dependency was not found:

* ~/apollo/queries/allCars in ./~/babel-loader/lib?{"presets":["vue-app"],"babelrc":false,"cacheDirectory":true}!./~/vue-loader/lib/selector.js?typ
e=script&index=0!./pages/graph.vue

To install it, you can run: npm install --save ~/apollo/queries/allCars

Page:

<template>
  <div>
    <h3>Cars</h3>
    <ul>
      <li :key="car.id" v-for="car in allCars">
          {{ car.year }} {{ car.make }} {{ car.model }}
      </li>
    </ul>
  </div>
</template>

<script>
import allCars from '~/apollo/queries/allCars'
export default {
  apollo: {
    allCars: {
      prefetch: true,
      query: allCars
    }
  },
  head: {
    title: 'Cars with Apollo'
  }
}
</script>

<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  line-height: 1.6;
}
a {
  text-decoration: none;
  color: #3498DB;
}
a:hover {
  border-bottom: 1px solid;
}
</style>

File layout:

I've actually found that this branch works:
https://github.com/nuxt/nuxt.js/tree/master/examples/with-apollo
which is a very different implementation to:
https://github.com/nuxt/nuxt.js/tree/dev/examples/vue-apollo

Which is correct?

[Atinux]

@ImTheDeveloper The dev branch is correct, the example is working fine on my end, try to use the last version of Nuxt.js

[ImTheDeveloper]

@Atinux Yep you're right I needed to get into nuxt@next. There were some issues around fetch which I've mentioned here:

https://github.com/nuxt/nuxt.js/issues/1305#issuecomment-321191503

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.