Multiple Queries/Mutation in Apollo 2.1

Question

I need some help using the new Query and Mutation component in Apollo 2.1, especially with multiple queries and mutations.

I have the following problems:

1. I have a graphql request that depends on a previous graphql result, how can I deal with this?
2. How do I add two different mutations (in my component I need to do two different actions) in a component that already has a query?

Answer 1

edit 2019/08/24 from the Apollo docs:

The new hooks API for Apollo Client is a simpler way to fetch data in your React app without the boilerplate of render prop components and higher-order components (HOC). We recommend using hooks for all new Apollo code going forward.

original answer: You are supposed to nest them. See this example:

const NumbersWithData = () => (
  <Query query={QueryOne}>
    {({ loading: loadingOne, data: { one } }) => (
      <Query query={QueryTwo}>
        {({ loading: loadingTwo, data: { two }}) => {
          if (loadingOne || loadingTwo) return <span>loading...</span>
          return <h3>{one} is less than {two}</h3>
        }}
      </Query>
    )}
  </Query>
);

To help with keeping the nesting manageable, you could check react-adopt. They have an Apollo ToDo App example, where they combine a Query and multiple Mutations.