Reactjs 在React组件内的多个GraphQL查询之间进行更改

我正在用react和GraphQL制作一个react应用程序，我想在其中默认随机选择鸡尾酒，但有一个选项可以在点击按钮后通过搜索查找特定的鸡尾酒。因此，我需要两个不同的查询

export default function Cocktails() {
    const [
        dataType,
        setDataType
    ] = useState('randomCocktail');

    const [
        queryType,
        setQueryType
    ] = useState(RANDOM_COCKTAIL_QUERY);

    const { loading, error, data, refetch } = useQuery(queryType);

    if (loading) return 'Loading...';
    if (error) return `Error! ${error}`;

    return (...)

如果我尝试在默认的useQuery下添加第二个（惰性）查询，程序将崩溃，因为加载和数据已经分配。（“分析错误：已声明标识符“正在加载”）

我想知道如何在从不同查询加载数据之间进行最佳切换。任何帮助都将不胜感激

  const { loading, error, data: dataBooks } = useQuery(getBooksQuery);

---

您可以将数据重命名为数据：一个组件中的多个查询应该正常工作。你能发布有问题的代码吗？当应用程序崩溃时，您会收到什么错误消息？谢谢！我添加了一些代码，以更好地说明什么样的代码现在会使程序崩溃。看起来您的问题是您声明了两次数据变量。当使用常量{..}语法将对象分解为变量时，您是在声明变量。尝试重命名一个数据变量，如const{data:data2，loading}。

  const { loading, error, data: dataBooks } = useQuery(getBooksQuery);