Change between multiple GraphQL queries within React component

Question

I'm making a react app with React and GraphQL where I want to default to randomize cocktails, but have an option to look up a specific cocktail through a search after a button click. Hence I need two different queries.

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 (...)

If i try to add a second (lazy) query beneath the default useQuery the program crashes because loading and data has already been assigned. ("Parsing error: Identifier 'loading' has already been declared")

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

I wonder how to best switch between loading in data from different queries. Any help would be greatly appreciated!

multiple queries in a component should work normally. can you post the problematic code? and whats the error message you get when the app crashes? — Jurica Smircic
Thank you! I've added code to show better what kind of code that crashes the program now. — ZeGeR
looks like your problem is that you declared the data variable twice. when destructuring object into variables with const {..} syntax you are declaring variables. try to rename one of the data variables like this const {data:data2, loading}. — Jurica Smircic

Yang Wang Yang Wang · Accepted Answer · 2021-02-15T05:19:45

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

you can rename data as data: dataBooks

Change between multiple GraphQL queries within React component

1 Answers