Multiple queries in a single component with useQuery hook

This seems to be an obvious question, but I’m having a hella time finding an answer. Is it possible to run more than one query with the useQuery hook a single component? Independent queries, in fact. useQuery seems to only work with the exact names loading, error, and data, and you can’t have more than one, of course, since those are declared constants. I’m having to create spurious components just to hold an extra query, which seems like bad practice - two components in the place of one simply because useQuery is a one-off. But I have a component that truly needs to get two separate chunks of data from two different queries. I’m OK with this being a true React/hooks limitation, but I feel like I’m missing something. Thanks in advance!

I’m new to apollo and have also run into this issue. I know you can get around this issue you describe the with duplicate query vars by reassigning the loading, error, and data as unique versions of themselves like this:

const { data: otherData, loading: otherLoading, error: otherError } 

but I’m not sure how scalable this solution is.

1 Like

Did you try something like this?

const { data } = useQuery(gql`
query MyQuery {
  query1
  query2
}
`);

Basically the same way we can do it in the Explorer | Sandbox?

I have no idea if it works.

You don’t have to destructure the result from useQuery:

const query1Results = useQuery(QUERY1);
const query2Results = useQuery(QUERY2);

return (
  <>
    <div>{query1Results.data?.someField}</div>
    <div>{query2Results.data?.someOtherField}</div>
  </>
);