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?
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
I think this is fixed in the latest alpha versions. vm.$isServer
is not used anymore