Skip to content

Vue Apollo Composable 4, prefetch not working in ssr mode #1100

Open
@tcastelly

Description

@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

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions