Apollo-module: I guess that SSR doesn't work

Created on 31 Oct 2019 · 14Comments · Source: nuxt-community/apollo-module

versions

nuxt: 2.10.0
@nuxtjs/apollo: 4.0.0-rc15

On my Nuxt page component, i wrote following codes

import gql from 'graphql-tag'
import axios from 'axios'
import formatData from '../my/format/func'

export default {
  apollo: {
    forms: {
      query: gql`
        Myquery
      `,
      fetchPolicy: 'cache-first',
      manual: true,
      result({ data, loading }) {
        console.log('log: result')
        if (!loading) {
          console.log('log: result not loading')
          this.myData = formatData(data)
        }
      }
    }
  },
  async asyncData({ app, params, error }) {
    console.log('log: asyncData')
    const { data } = await axios.get('my.api.com/service', { id: params.id })
    if (!data) {
      error({statusCode: 404, message: 'NotFound'})
    }
    return {
      service: data
    }
  },
  data() {
    return {
      myData: null
    }
  },
  created() {
    console.log('log: created')
  },
  mounted() {
    console.log('log: mounted')
  },
}

On the server side log, i expected log: result is printed before log: created like following logs:

log: asyncData
log: result
log: result not loading
log: created

But i got:

log: asyncData
log: created
log: result
log: result not loading

And on the client side browser console, i expected log: result is not printed. But i got:

log: result // i think it is cache log
log: result not loading // i think it is cache log
log: created
log: mounted
log: result
log: result not loading

I don't know what is wrong. I guess apollo smart query is always excuted on the client side. Did i use wrong fetchPolicy?

_{This question is available on Nuxt community (#c255)}

question

Source

ashnamuh

👍1

Most helpful comment

In fact, prefetch is working properly on initial load. But not when navigating to a page using nuxt-link
Could there be an issue on nuxt-link?

dsciamma on 11 Feb 2020

👍8

All 14 comments

This issue as been imported as question since it does not respect apollo-module issue template. Only bug reports and feature requests stays open to reduce maintainers workload.
If your issue is not a question, please mention the repo admin or moderator to change its type and it will be re-opened automatically.
Your question is available at https://cmty.app/nuxt/apollo-module/issues/c255.

cmty[bot] on 31 Oct 2019

You did nothing wrong, it's just a apart of how vue-apollo works. You can take a look at https://github.com/nuxt-community/apollo-module/issues/210

kieusonlam on 31 Oct 2019

Ah... I see. I think vue-apollo does not support SSR currently. So, shoud i use asyncData with Apollo like this issue for SSR?

ashnamuh on 31 Oct 2019

It's depend on what you need.

As i mention here https://github.com/nuxt-community/apollo-module/issues/125#issuecomment-404391741

The html things is still work with SSR:

<template>
    <div v-if="$apollo.loading">
        skeleton loading,... (better UX for client side)
    </div>
    <div v-else>
       Every thing use in here still render on server side on time. (you can check the page source)
    </div>
</template>

You just cannot use or modify data in created because the data need sometime to load. Also you can't dispatch error page if is there something wrong with the query or backend (this error because nuxt is not yet support plugin to dispatch error).

So use asyncData if you need dispatch error page or using data before SSR is completed.

kieusonlam on 31 Oct 2019

I got it. Thank you so much for comment quicky!

ashnamuh on 31 Oct 2019

I'm running up against similar issues trying to coordinate where my data is fetched.

Looking at the vue-apollo docs, I saw that there is a prefetch: true option for a query on apollo. Isn't it designed exactly for this scenario? I tried using it but it doesn't seem to make a difference. I'm not sure if I'm doing something wrong or if it just doesn't do what I thought it I did. I assumed this option would cause the SSR to wait on the query to finish before returning.

@kieusonlam I'm also trying to figure out how you use the v-if="$apollo.loading" thing. Do you put components that use apollo to query data within there? I tried that but still see SSR errors.

For example:

<template>
  <div>
    <div v-if="$apollo.loading">
      Loading itineraries...
    </div>
    <div v-else>
      <b-table :data="itineraries" :columns="columns"></b-table>
    </div>
  </div>
</template>

apollo: {
    itineraries: {
      query: gql`
        query {
          itineraries {
            name
            hotel
            checkIn
            checkOut
          }
        }
      `
    }
  },

But perhaps I misunderstand how you intended that to be used.

I'm on 4.0.0-rc18.
The error I keep seeing in my console is Mismatching childNodes vs. VNodes ...

zacharyw on 12 Dec 2019

@zacharyw I not pretty sure what problems you got. What SSR error did you get? Can you make a codesanbox or repo for me to take a look. $apollo.loading just to prevent app crash on client side, it didnt related to SSR.

kieusonlam on 12 Dec 2019

@kieusonlam

I'm on 4.0.0-rc18.
The error I keep seeing in my console is Mismatching childNodes vs. VNodes ...

Might be able to make a repo in the next day or so if I don't figure this out.

zacharyw on 12 Dec 2019

@kieusonlam Just so I know if this is supposed to work how I think it should:

apollo: {
    itineraries: {
      prefetch: true,
      query: gql`
        query {
          itineraries {
            name
            hotel
            checkIn
            checkOut
          }
        }
      `
    }
  }

With prefetch: true, should the SSR block until the query completes and the data is set?

I'm having trouble understanding what the difference between prefetch: true or using asyncData to run a query is, or when they should be used.

zacharyw on 12 Dec 2019

👍8

In fact, prefetch is working properly on initial load. But not when navigating to a page using nuxt-link
Could there be an issue on nuxt-link?

dsciamma on 11 Feb 2020

👍8

I'm still seeing the same issues as noted above for this, with smart queries working on initial load but not navigation. Is a bug or just how smart queries with Apollo?