Apollo-module: Apollo client hydration

[yaki4]

Version

v4.0.0-rc.4

Reproduction link

https://graphnewreader-uqpacjfhny.now.sh

Steps to reproduce

Click one of the link for second page.
Click the second button.
New query load.

link to git: https://gitlab.com/yaki4/grapheader.git

What is expected ?

New query use new store value in headers.

What is actually happening?

New query doesn't use new store value in headers.

Additional comments?

I already fill a bug report for this one. But the update doesn't resolve this issue.

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

[yaki4]

I've find an alternative in case someone is interested.
You can use the link option in your client instead of the defaultHttpLink option.
All you have to do is add apollo-link-http to you project and then you can create a middlewareLink like so :

export default ({req, app}) => {

    const endpoint = 'https://mysuperbgraphql/api/queries'

    let httpLink = new HttpLink({ uri: endpoint, credentials: 'include'})

    const middlewareLink = new ApolloLink((operation, forward) => { 

        let headersVal = {

            'Accept-Language': app.i18n.locale

        }

        const source = process.server ? req.headers.cookie : document.cookie

        if (source) {

            const parsecookie = cookieparser.parse(source)

            if (parsecookie.authorization) {

                // pass auth token in headers

                headersVal['Authorization'] = parsecookie.authorization

            }

        }

        operation.setContext({

            headers: headersVal,

            uri: endpoint,

            credentials: 'include'

        })

        return forward(operation)
    })

    const link = middlewareLink.concat(httpLink)

    return {

        defaultHttpLink: false,

        link: link,

        cache: new InMemoryCache()

    }

}

Although, i think that the default client should be able to detect the changed value by himself. For example if you use i18n value in your client for custom endpoint for example. The client has to be dynamic.
But maybe i'm wrong and there is no other way than use a middlewareLink to detect this changes.

[AleksejDix]

You can see this bug happening live on this website https://webzueri.ch/

Go to https://webzueri.ch/speakers and reload the page.

on all my pages i suddenly get commons.app.js:12540 [Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render. but there no mistakes in the html template

[AleksejDix]

Here is a Repository with bug reproduction
https://github.com/AleksejDix/Bug-nuxt-apollo-apollo-nuxt-module

@Akryum it happens only when server prefetch is true

[dhritzkiv]

@AleksejDix if you pin your vue version to 2.6.7 (instead of 2.6.8) and nuxt to 2.4.3, does this still happen?

I get this issue in nuxt (nuxt-ts, more specifically) v2.4.5 and vue v2.6.8, but not in the older version.

[sh]

it's actually @nuxt/[email protected] that introduced the bug, the related PR is: https://github.com/nuxt/devalue/pull/6

[aldarund]

@AleksejDix thanks for reproduction, i have created a fix https://github.com/nuxt/devalue/pull/7

[rnenjoy]

Is it possible for me to use that fix somehow before the actual release? I'm getting error on all pages about missmatched Nodes

[dhritzkiv]

Seems to be fixed in the latest Nuxt + vue

[cmty[bot]]

This bug-report has been fixed by @aldarund.