如何在 react/apollo 中调用条件 useQuery 钩子答案

【问题标题】：how to call conditional useQuery hook in react/apollo如何在 react/apollo 中调用条件 useQuery 钩子
【发布时间】：2021-03-02 11:48:37
【问题描述】：

所以我知道我可以在查询中使用skip 来跳过它们，但是，这需要我做这样的事情

const [fetchQuery1, { loading1, data1 }] = useQuery({
 //..
 skip: cond1
});
const [fetchQuery2, { loading2, data2 }] = useQuery({
 //..
 skip: cond2
});
const [fetchQuery3, { loading3, data3 }] = useQuery({
 //..
 skip: cond3
});

但这对于一些未使用的查询来说有很多变量

我有一个代码，其中基本上有 3 个查询，三个查询中只有一个会触发。而不是创建一个 milions 变量而不是添加一个 if(loading1 || loading2 || loading3) 我想要一个加载变量。

所以我现在正在做

  const { data, loading, error } = cond1
    ? useQuery(Query1)
    : cond2 ? useQuery(Query2) : useQuery(Query3)

所以上面的方法有效，但它违反了条件挂钩的规则。

所以我想知道是否有一种很好的方法可以做到这一点，而不会污染变量

【问题讨论】：

标签： reactjs asynchronous react-hooks react-apollo apollo-client

【解决方案1】：

您可以有条件地将 gql 文档传递给 useQuery 挂钩。

const QUERY = cond1 ? QUERY1 : cond2 ? QUERY2 : QUERY3;
const { data, loading, error } = useQuery(QUERY);

【讨论】：

嗨，谢谢，这确实可行。但我的错误，我也使用了像useQuery<T,D>() 这样的类型，所以我想我应该在那里使用多个类型。
是的，你可以使用联合来键入钩子，但它不如只有一个钩子和一个打字那么安全。