Query is briefly fetching = true after SSR restoreData

[sheldonbaker]

After populating the ssr exchange on the client as follows:

const ssr = ssrExchange({ isClient: process.env.CLIENT, initialState: process.env.CLIENT ? window.__URQL_JSON__ : undefined })

and in a Vue component, as per the docs:

<template>
  <div v-if="fetching">
    Loading...
  </div>
  <div v-else-if="error">
    Oh no... {{error}}
  </div>
  <div v-else>
    <ul v-if="data">
      <li v-for="todo in data.todos">{{ todo.title }}</li>
    </ul>
  </div>
</template>

<script>
import { useQuery } from '@urql/vue';

export default {
  setup() {
    const result = useQuery({
      query: `
        {
          todos {
            id
            title
          }
        }
      `
    });

    return {
      fetching: result.fetching,
      data: result.data,
      error: result.error,
    };
  }
};
</script>

I get a brief flash of "Loading...", even though the SSR exchange was properly populated with the todos (no network request is fired to the server to fetch the todos again). Is this expected? Is there a known workaround, if so (it's an odd experience for the user)?

Thanks!

[JoviDeCroock]

That should not be the case as restoreData happens synchronous. There are a few options why this behavior could arise

• during your ssr you rendered the loading state and urql corrects post-hydration
• you have an async exchange before the ssr-exchange
• you call restoreData after hydration/render (unlikely as I guess this would be unpredictable in render timing)

Maybe I'm overlooking something vue-related but I haven't ran into this issue myself.

[sheldonbaker]

D'oh! It was an authExchange before my ssrExchange. Thanks for the heads up!