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

Question

默认行为是随组件设置立即加载 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>

只需将 "refetch" 添加到 useQuery 行并从按钮单击事件中调用它。

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

此致

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

How to manually call query (e.g. on click) using Vue Apollo Composible?

composition

vue-apollo