Vue Apollo useSuspenseQuery

App.vue

<script setup lang="ts">
import { useSuspenseQuery } from './useSuspenseQuery';

const { result } = await useSuspenseQuery(...);
</script>

<template>
  <pre>{{ result }}</pre>
</template>

useSuspenseQuery.ts

import { useLazyQuery } from '@vue/apollo-composable';

export const useSuspenseQuery = async <
  TResult = any,
  TVariables extends Record<string, unknown> = any,
>(
  ...params: Parameters<typeof useLazyQuery<TResult, TVariables>>
): Promise<ReturnType<typeof useLazyQuery<TResult, TVariables>>> => {
  const result = useLazyQuery(...params);

  await result.load();

  return result;
};