[Feature] example with Nuxt.js

[frankspin89]

Would be awesome to see an example to use Graph.cool with Nuxt.js.

I"m curious to see how to implement GraphQL with Server Side rendering

[dohomi]

Hi @frankspin89 there are couple of discussions about apollo and vue/nuxt. You might need to wait untill Nuxt 1.x is finalized with an working example of vue-apollo. You can find the discussion here: https://github.com/nuxt/nuxt.js/issues/504 I am using the vanilla javascript approach of Pier and it works very neat. If you are using vuex in your app give it a shot: https://github.com/PierBover/vuex-apollo-example-project You can use that approach right away because it almost no dependencies and works without an issue already on Nuxt 0.10.7

[frankspin89]

@dohomi thanks! I started to implement the approach of Pier. The basics are working fine for me. Had to disable subscriptions on the server side.

[dohomi]

@frankspin89 yes I am using subscriptions only on the client side: https://github.com/nuxt/nuxt.js/issues/984 I also couldn't require ws on the server side

[frankspin89]

@dohomi Do you also have to use fetchPolicy: 'network-only' to load new data correctly?

[dohomi]

@frankspin89 no that I only had to use on vue-apollo, but I removed that from my project. With vanilla apollo I do:

  const ssr = process.SERVER_BUILD
  return new ApolloClient({
    networkInterface: networkConf,
    dataIdFromObject: r => r.id,
    ...(ssr ? {
      ssrMode: true
    } : {
      connectToDevTools: process.env.NODE_ENV !== 'production'
    })
  })

[vuchl]

thee is this https://github.com/nuxt/nuxt.js/pull/1160 and this https://github.com/nuxt/nuxt.js/pull/1161 now

[marktani]

That's awesome, thanks @vuchl!

[dohomi]

an official example came out now for rc2: https://github.com/nuxt/nuxt.js/tree/dev/examples/vue-apollo

[vuchl]

yes the newly release [vue-apollo](https://github.com/nuxt/nuxt.js/tree/dev/examples/vue-apollo) is much smarter: there is now a nuxt module nuxt-community/apollo-module that is responsible to provide the apollo client in the nuxt environment. and you only need to specify the graphql endpoint in your nuxt.config.js. Really well architected.

[frankspin89]

Maybe i'm missing something but the new release seems far from complete? Don't see a option to authenticate requests with a bearer token? And it's lacking a implementation to use subscriptions?

[vuchl]

it's just a simple example of how to integrate the vue-apollo plugin as a module in nuxt. Detailed Auth examples and mutations are not yet in.

[marktani]

Here's a great Nuxt example: https://www.graph.cool/forum/t/nuxt-js-apollo-website-for-sharing-codes/545?u=nilan :) Thanks to @Samuell1 for working on that! :tada:

[sebastianmacias]

Any update on this?

Tnx

[dohomi]

I'd recommend to use https://github.com/nuxt-community/apollo-module

[Lahori-Jawan]

@sebastianmacias @dohomi @frankspin89 Although pretty late but I had built a blog using node+nuxt+graphQL(apollo)+sequelize here