如何在 react/apollo 中调用条件 useQuery 钩子

Question

So I know I can use skip on query to skip them, but, this require me to do something like this

const [fetchQuery1, { loading1, data1 }] = useQuery({
 //..
 skip: cond1
});
const [fetchQuery2, { loading2, data2 }] = useQuery({
 //..
 skip: cond2
});
const [fetchQuery3, { loading3, data3 }] = useQuery({
 //..
 skip: cond3
});

but this is a lot of variable for some unused query

I have a code, where basiaclly there is 3 query, and only one will fire out of the three. Instead of creating a milions variable than add a if(loading1 || loading2 || loading3) I would like to have a single loading variable.

so right now I was doing

  const { data, loading, error } = cond1
    ? useQuery(Query1)
    : cond2 ? useQuery(Query2) : useQuery(Query3)

so the above works, but it goes against the rule of conditional hooks.

So I wonder if there is a nice way to do this, without polluting the variables

Answer 1

You could conditionally pass the gql document to the useQuery hook.

const QUERY = cond1 ? QUERY1 : cond2 ? QUERY2 : QUERY3;
const { data, loading, error } = useQuery(QUERY);