时间戳

首页 > 解决方案 > 在 React 组件中的多个 GraphQL 查询之间进行更改

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

问题描述

我正在使用 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 下添加第二个（惰性）查询，程序会崩溃，因为已经分配了加载和数据。（“解析错误：标识符‘正在加载’已被声明”）

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

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

标签： reactjsgraphqlreact-hooksapollo

解决方案

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

您可以将数据重命名为数据：dataBooks

推荐阅读