在 React 组件中的多个 GraphQL 查询之间切换

Question

我正在使用 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, refetch } = useQuery(queryType);
const { loading, data } = useLazyQuery(ONE_COCKTAIL_BY_NAME_QUERY);

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

Answer 1

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

您可以将数据重命名为数据：数据手册