Vue-apollo: Debounce should be ignored in SSR

[ceopaludetto]

Debounce option in query to more performatic search, crash SSR

When I use debounce: 0. Console output:

You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html

Using debounce: 250. Console output:

...more warnings here about mismatch rendering comparing server to client
[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.

You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html

My graphql API runs on the same server that renders my app, for more perfomance I use apollo-link-schema.

My query:

query GetAllNotes($search: String) {
  getAllNotes(search: $search) {
    id
    name
    done
    created_at
    itens {
      id
      name
      price
      quantity
    }
    user {
      id
      name
    }
  }
}

The search variable updates every time when I type

My configuration:

|Module|Version|
|----------|---------|
|vue-apollo|3.0.0-beta.28|
|graphql|14.2.1|
|apollo-client|2.5.1|
|apollo-link-http|1.5.14|
|apollo-link-schema|1.2.2|

Thank's for attention.

[RafaelGSS]

Hello! Can you create a reproduction link? https://codesandbox.io/

[dhritzkiv]

I am also experiencing this.

As a workaround, I employed setOptions in the mounted hook (so that it only runs on the client):

mounted() {
    // debounce settings need to be applied on the client, otherwise, hydration problems ensue
    const options = {
        debounce: 300,
    };

    this.$apollo.queries.QUERY_NAME.setOptions(options as any)
}

Ideally, debounce would be ignored in SSR (seeing as how there are no user events to handle)

[IngvarListard]

Solution above doesn't work for me. Option is set, but on client side debounce is still 0.
vue-apollo 3.0.0 with nuxt 2.10.1.
And of course because of debounce query didn't triggered on server side.

[ormarek]

@dhritzkiv 's answer didn't work for me either but I managed to solve it that way.

1. Set debounce to false in smart query
   name: { query: Query, variables() { return {} }, debounce: false }

2. Put in mounted:

this.$apollo.queries.Q_NAME.stop()
this.$apollo.queries.Q_NAME.setOptions({ debounce: 500 })
this.$apollo.queries.Q_NAME.start()

It didn't work without stopping and starting so I think it is necessary so apollo resets watchers (?) correct me if I'm wrong

[dhritzkiv]

FWIW, 8d5734d fixed using the debounce issue on the server, and I am now able to use it as intended (from the smart query component options).

Using vue-apollon 3.0.2, @nuxtjs/apollo 4.0.0-rc18, apollo-client 2.6.8