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

Posted 2023-03-10

【中文标题】在 React 组件中的多个 GraphQL 查询之间进行更改

【英文标题】：Change between multiple GraphQL queries within React component

【发布时间】：2020-04-24 03:13:06

【问题描述】：

我正在使用 React 和 GraphQL 制作一个反应应用程序，我希望默认随机化鸡尾酒，但可以选择在单击按钮后通过搜索查找特定鸡尾酒。因此我需要两个不同的查询。

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 下添加第二个（惰性）查询，程序会崩溃，因为加载和数据已经分配。 ("解析错误：标识符'loading'已经被声明")

const  loading, error, data, refetch  = useQuery(queryType);
const  loading, data  = useLazyQuery(ONE_COCKTAIL_BY_NAME_QUERY);

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

【问题讨论】：

一个组件中的多个查询应该可以正常工作。您可以发布有问题的代码吗？应用崩溃时您收到的错误消息是什么？

谢谢！我添加了代码以更好地显示导致程序崩溃的代码类型。

看起来您的问题是您两次声明了 data 变量。当使用 const .. 语法将对象解构为变量时，您正在声明变量。尝试重命名这样的数据变量之一 const data:data2, loading。

【参考方案1】：

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

您可以将数据重命名为 data: dataBooks