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

Posted 2023-03-10

【中文标题】如何在 react/apollo 中调用条件 useQuery 钩子

【英文标题】：how to call conditional useQuery hook in react/apollo

【发布时间】：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)

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

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

【参考方案1】：

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

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

【讨论】：

嗨，谢谢，这确实可行。但我的错误，我也使用了像useQuery<T,D>() 这样的类型，所以我想我应该在那里使用多个类型。

是的，你可以使用联合来键入钩子，但它不如只有一个钩子和一个打字那么安全。