Apollo-module: I keep getting Mismatching childNodes vs. VNodes with v-for

[kieusonlam]

Version

v4.0.0-beta.7

Reproduction link

https://github.com/nuxt-community/apollo-module

Steps to reproduce

It's happen on my 2 project. I just using normal code.

<template>
    <div>
        <div>Something</div>
        <div v-for="post in posts" :key="post.id">
            {{ post.title }}
        </div>
        <div>Something else</div>
    </div>
</template>

<script>
export default {
  data: () => ({
    posts: null
  }),
  apollo: {
    posts: {
      query: postsQuery,
      variables: { first: 25 },
      prefetch: true
    }
  }
}
</script>

When I add any tag before or after "v-for" tag I got "Mismatching childNodes vs. VNodes".

And sometime if I remove both those tag I got duplicated results.

What is expected ?

Working normaly.

What is actually happening?

"Mismatching childNodes vs. VNodes" and "Duplicated results"

_{This bug report is available on Nuxt community (#c108)}

[kieusonlam]

I wonder is there anyone get the same problem or maybe just me?

[dohomi]

I honestly don't use prefetch:true in my app so I can't tell. If you have a reproduction to trace down the error would be perfect

[dohomi]

before I forget: is this new or happened on other versions as well?
can you change just to see if this makes any difference:

data: () => ({
    posts:[]
  }),

[kieusonlam]

I not quire sure when it's happened, as I remember it used to work.

And yes I did try some older version, still got the same problem.

Here is the repo: https://github.com/kieusonlam/apollo-module-issue-125

Reproduction:

I change code in https://github.com/kieusonlam/apollo-module-issue-125/blob/master/pages/index.vue

I did try to replace prefetch with asyncData

  async asyncData({ app }){
    const posts= await app.apolloProvider.defaultClient.query({
       ...
    }).then(({ data }) => data && data.posts)
    return { posts }
  },
  data: () => ({
    posts: []
  }),
  apollo: {
    movies: {
        ...
    }
  }

In some place it's work, in some place it's not @_@

By the way if I view source of the web page, I can see that SSR is render correctly, and also what i tried with asyncData, I think maybe it is a client side problem?

[kieusonlam]

My bad, I can reconfirm that asyncData can work as the replacement.

[dohomi]

@kieusonlam for me this sounds like an issue rather on Nuxt or vue-apollo than this wrapper. To overcome SSR issues I mostly use your asyncData approach to make sure that everything is fetched on the server.

[kieusonlam]

Think you right.

I feel like prefetch is better asyncData for some case. For me sometime the api server can take long time to response, so the vistor have to wait for the data until go to the next page. With prefetch, I can take visitor to the next page faster with the loading placeholder on components. I feel like it's much better for UX.

It would be nice if someone can fix it. I will close this issue for now. Thanks @dohomi

[kieusonlam]

Hey @dohomi

Just wanna let you know, I just tried with the old code, it's weird because it's working without problem. https://github.com/kieusonlam/apollo-module

[dohomi]

then there must be a bug :-) can you diff the current plugin with your fork and see what might be the issue? All I'd think of is the getAuth function might differs on server to client - that might result in the render issue. Lets say you have on server different credentials than on client than both requests will deliver different result and so the render will be different as well

[kieusonlam]

I created a PR https://github.com/nuxt-community/apollo-module/pull/126

[dohomi]

just relased beta.8 thanks @kieusonlam

[saibbyweb]

I am facing the exact same issue. Is there any solution to this?