Vue Apollo Composable 4, prefetch not working in ssr mode

[tcastelly]

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

[dmitry]

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.

[tcastelly]

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

(about vue-apollo-composable I patched like this: https://github.com/vuejs/vue-apollo/issues/1081#issuecomment-725983099)

{
    "@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/[email protected] but I still have the same problem. Because I use vue-apollo-composable, I guess I don't need vue-apollo client?

[frandiox]

Looks like @vue/apollo-composable is using getCurrentInstance().$isServer to skip prefetch. This $isServer flag doesn't seem to be part of Vue 3: https://github.com/vuejs/vue-next/blob/c421fb91b2bec047e665f8269e231bf89f9bfc93/packages/runtime-core/src/component.ts#L203

[unrevised6419]

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