vuejs/apollo

Vue Apollo Composable 4, prefetch not working in ssr mode

tcastelly opened this issue · 4 comments

Describe the bug
When VueJS 3 application is running in ssr mode, the prefetch apollo is not working.

To Reproduce

export default defineComponent({
  name: 'Graphql',
  setup() {
    const { result } = useQuery(DEMO_QUERY, {}, {
      prefetch: true,
    });

    return {
      result,
    };
  },
});

My workaround is to add a promise in serverPrefetch to wait values:

export default defineComponent({
  name: 'Graphql',
  setup() {
    const { result, loading } = useQuery(DEMO_QUERY, {}, {
      prefetch: true,
    });

    return {
      result,
      loading,
    };
  },
  async serverPrefetch() {
    return new Promise((resolve) => {
      watch(
        () => this.loading,
        () => resolve(),
      );
    });
  },
});

Link to a project:
https://github.com/shenron/vue3-example-ssr/blob/apollo/src/pages/Graphql.vue

Expected behavior
In my mind, because I set prefetch to true, the query should be resolved before the renderToString.

Versions
vue: 3.0.2
edit: apollo-client: 4.0.0-alpha.12
@apollo/client: 3.2.0
@vue/apollo-composable: 4.0.0-alpha.12

Where did you found apollo-client 4.0.0? Probably you mean vue-apollo 4.0.0? In case of that what apollo-client version do you have? It should be something around 3.2 or 3.3. In my case everything works with vue-apollo v3.0.5 + apollo-client v3.2.6.

I'm sorry I mix-up apollo-client and @vue/apollo-composable versions ...

(about vue-apollo-composable I patched like this: #1081 (comment))

{
    "@vue/apollo-composable": "file:vue-apollo-composable-v4.0.0-alpha.12.tgz",
    "apollo-client": "^2.6.10",
    "vue": "^3.0.2",
  },

I replaced apollo-client by @apollo/client@3.2.0 but I still have the same problem. Because I use vue-apollo-composable, I guess I don't need vue-apollo client?

I think this is fixed in the latest alpha versions. vm.$isServer is not used anymore