React Apollo - Make Multiple Queries

Question

I have a queries file that looks like this:

import {gql} from \'react-apollo\';

const queries = {
  getApps: gql`
    {
      apps {
        id
        name
            


        

Answer 1

For Apollo 2.x: you can use react-adopt to compose the Queries and Mutations into a single level. (That lib will compose any components with render props, e.g. the React Context API.)

https://github.com/pedronauck/react-adopt

Answer 2

According to this Link, to use compose() you need to follow these steps:

1- install "recompose" package using npm i recompose

2- import package using import { compose } from "recompose";

3- use it in the form of:

export default compose(
  graphql(Query1, { alias: "Query1" }),
  graphql(Query2, { alias: "Query2" })
)(Test);

documentation : https://www.apollographql.com/docs/react/api/react-apollo/

Answer 3

IMHO, one of the most neat solutions is described in the Apollo Client React implementation.
The basic idea is to wrap your queries into nested Query components. Using closure functions as component children makes it handy to delegate the results of one query down into another query and so on.

 const QueryOne = gql`
  query One {
    one
  }
`;

const QueryTwo = gql`
  query Two {
    two
  }
`;

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>
);

Answer 4

Since, compose has been removed from apollo, there's an alternative library called lodash. The method {flowRight} acts in the same way as compose. Just follow the steps:-

1. npm i -s lodash

2. import {flowRight} from 'lodash'

3. Exchange the usage of compose with flowRight, all the other code will work the same.