如何使用 Vue Apollo Composable 手动调用查询（例如点击）？答案

【问题标题】：How to manually call query (e.g. on click) using Vue Apollo Composible?如何使用 Vue Apollo Composable 手动调用查询（例如点击）？
【发布时间】：2020-05-25 19:13:48
【问题描述】：

默认行为是使用组件设置立即加载 useQuery。

我想在点击之类的事件上触发查询。

怎么做？

【问题讨论】：

标签： composition vue-apollo

【解决方案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>

只需将“重新获取”添加到 useQuery 行并从按钮单击事件中调用它。

编辑：您可以禁用查询，因此它不会在组件设置和按钮单击时触发，您可以启用查询并重新获取它。

最好的问候

【讨论】：