如何在第一次渲染和点击时都渲染 useQuery？ [ReactJS，graphql]

Question

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

根据我的阅读，当 React 首次挂载一个调用 useQuery 的组件时，Apollo 会自动执行查询，如果我想执行该查询以响应事件，我可以改为使用useLazyQuery 返回一个可以调用的函数。如果我想两者都做怎么办？

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

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

附：我的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
                }
            });
        }
    }
});

附言作为refetch 的示例，有时需要调用来渲染而其他时候不需要，我有另一个useQuery，它与上面几乎相同（使用不同的查询）也有refetch，但它首先呈现加载

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

Answer 1

，但我尝试在 useQuery 中使用 refetch，这绝对允许我调用该函数，但似乎并不总是在组件挂载时触发（更令人困惑的是，有时它会，有时它不会' t)

我怀疑

...网络请求没有被触发？ ...或者您的onCompleted 条件不满足（那么没有dispatch）？没有dispatch 并不意味着没有请求/解雇...

onCompleted: (data) => {
    if (data !== undefined && data.getTaskTypes !== undefined && data.getTaskTypes !== state.taskTypes) {

也许你可以删除所有条件：

• 当data 存在时，onCompleted 被触发，无需测试它（data !== undefined）
• getTaskTypes 可以为空吗？如果不是（恕我直言，它不应该），也不要测试它；
• data.getTaskTypes !== state.taskTypes - 为什么不只针对这种类型询问 API？不支持过滤？

你的代码有点混乱

useQuery(GET_TASK_TYPES(["taskId", "taskType"])

它看起来像一些生成器/函数（定义必填字段？） - 改用 const。

还原

看起来您正在使用 redux 来存储接收到的数据。 Apollo 更加智能（规范化缓存）并且不需要为每个数据 [type] 获取编写自定义操作。您应该为此使用 Apollo，但可能您对其进行了测试但失败了？ ...

缺少id 字段？

您的任务没有id 字段而是taskId？ Apollo 不会将其写入缓存。幸运的是，您可以帮助 Apollo 识别您数据中的唯一标识符 - https://www.apollographql.com/docs/react/caching/cache-configuration/#custom-identifiers

在此之后，您可以简单地使用来自useQuery 的data 进行第一次渲染，并在需要/来自事件处理程序时使用refetch（不使用useEffect 挂钩）。

Answer 2

使用 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>