如何在第一次渲染和 onclick 上渲染 useQuery？[ReactJS、graphql]

Question

如何让 useQuery() 在第一次渲染以及后续事件（例如按钮单击）上触发？

据我所知，当 ReactuseQuery第一次挂载一个调用 a 的组件时，Apollo 会自动执行查询，如果我想执行该查询来响应事件，我可以使用useLazyQuery它返回一个函数，该函数可以叫做。如果我想两者都做怎么办？

不太确定我对 React hooks 的理解的哪一部分是不正确或不完整的，但我尝试过使用refetchin useQuery，这绝对允许我调用该函数，但似乎并不总是在组件安装时触发（更令人困惑的事情是有时会，有时不会）。我也在使用notifyOnNetworkStatusChange，我读到它需要refetch认识到它应该onCompleted触发useQuery.

任何帮助将不胜感激，我想我根本不了解 Hooks。谢谢！

PS我的一个例子useQuery如下：

const { refetch: refetchGetTaskTypes } = useQuery(GET_TASK_TYPES(["taskId", "taskType"]), {
    notifyOnNetworkStatusChange: true,
    onCompleted: (data) => {
        if (data !== undefined && data.getTaskTypes !== undefined && data.getTaskTypes !== state.taskTypes) {
            dispatch({
                type: 'GET_TASK_TYPES',
                payload: {
                    taskTypes: data.getTaskTypes
                }
            });
        }
    }
});

PPS 作为一个例子，refetch有时需要调用渲染，有时则不需要，我有另一个useQuery几乎与上面相同的（具有不同的查询），它也有refetch，但它在第一次加载时渲染

PPPS 我有时会看到另一个问题，即refetch数据过时，我必须使用fetchPolicy: 'cache-and-network'它来修复它。然而它并不总是发生

Answer 1

使用 LazyQuery -

const [getTaskType, { loading, data }] = useLazyQuery(GET_TASK_TYPE, {fetchPolicy: 'network-only'}); // fetch policy is to not look for cache and take the data from network only

获取页面加载数据 -

useEffect(() => {
    getTaskType();
}, []);

要随时在单击按钮时触发它，您只需调用该方法即可。-

<Button                                                
  onClick={()=>getTaskType()}>Click Me!
</Button>