Is it possible to call multiple queries with useQuery?

Hi, In advance thank you great library.

In our product, there is the a page which needs data from 2 or 3 GraphQL queries and we want to call multiple queries with one useQuery().

export const Curriculums = ({ children }) => {

  const { data, error } = useQuery(QUERY_CURRICULUMS)

  /* We want to call useQuery as below 
  const { data, error } = useQuery([
     QUERY_CURRICULUMS, 
     QUERY_COURSES, 
     QUERY_LESSONS
     ]
  ) 
  */

  if (error) {
    throw error
  }

  return children(data)
}

Is it possible to do the same things as compose() method defined in react-apollo?

https://www.apollographql.com/docs/react/react-apollo-migration#compose-to-render-composition

Or should we call useQuery with each queries?

Thanks.

[MarioKrstevski]

I have a simple solution that worked for me.

const { data: dataR, error: errorR, loading: landingR } = useQuery(GET_RESTAURANTS);
const { data, error, loading } = useQuery(GET_DAILY_MENU);

I am simply renaming the fields useQuery is giving me in the first call, so that they can live in the same scope, otherwise the second query will overwrite the first.

[FezVrasta]

compose just calls multiple HOCs together, but it doesn’t anything else, in fact you have to map the result of the queries manually to avoid them from being overridden by the next query.

What you want to do is compose multiple useQuery into your own custom hook:

const queryMultiple = () => {
  const res1 = useQuery(...);
  const res2 = useQuery(...);
  return [res1, res2];
}