如何使用Vue Apollo Composible手动调用查询（例如点击）？]

Question

默认行为是useQuery随组件安装程序一起立即加载。

我想在诸如click之类的事件上触发查询。

如何做？

默认行为是useQuery随组件安装程序一起立即加载。我想在某些事件（如单击）上触发查询。怎么做？

Answer 1

我也搜索了很多，但是在他们的文档vue apollo v4e中写了它>

import { useQuery, useResult } from '@vue/apollo-composable'
import gql from 'graphql-tag'

export default {
  setup () {
    const { result, loading, error, refetch } = useQuery(<query>)

    const users = useResult(result)

    return {
      users,
      loading,
      error,
      refetch,
    }
  },
}
</script>

<template>
  <div v-if="loading">Loading...</div>

  <div v-else-if="error">Error: {{ error.message }}</div>

  <ul v-else-if="users">
    <li v-for="user of users" :key="user.id">
      {{ user.firstname }} {{ user.lastname }}
    </li>

    <button @click="refetch()">Refresh</button>
  </ul>
</template>