Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Is it possible to call multiple queries with useQuery? #120

Closed
AtaruOhto opened this issue Mar 28, 2019 · 3 comments

Comments

Projects
None yet
3 participants
@AtaruOhto
Copy link

commented Mar 28, 2019

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.

@FezVrasta

This comment has been minimized.

Copy link

commented Mar 28, 2019

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];
}
@AtaruOhto

This comment has been minimized.

Copy link
Author

commented Mar 29, 2019

@FezVrasta

Thank you for your quick response. I understand and we'll call useQuery as described :)
I'll close the issue.

@AtaruOhto AtaruOhto closed this Mar 29, 2019

@dannycochran

This comment has been minimized.

Copy link

commented May 6, 2019

@FezVrasta I think I am noticing a similar issue, not sure if this is expected behavior. The top level of my app is wrapped in an <ApolloHooksProvider />.

I have two components in the tree that each call useQuery with distinct queries against completely different parts of the schema. The component which renders last seems to cancel the in flight /graphql request created by the first component's useQuery call. Is it expected that only one network request can be in flight at any given time from useQuery? If so, that feels like an unnecessary restriction.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.