Untitled

<template>
  <div>
    <div v-if="loading">Loading...</div>
    <div v-else>
      <div v-if="error">Error: {{ error.message }}</div>
      <div v-else>
        <ul>
          <li v-for="user in users" :key="user.id">{{ user.name }}</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent } from 'vue';
import { useQuery, gql } from '@apollo/client/core';

const GET_USERS = gql`
  query GetUsers {
    users {
      id
      name
    }
  }
`;

export default defineComponent({
  setup() {
    const { loading, error, data } = useQuery(GET_USERS);

    return {
      loading,
      error,
      users: data ? data.users : [],
    };
  },
});
</script>