Use result for first query in second query with Apollo Client?

Question

Im using Apollo, React and Graphcool. I have a query to get the logged in users ID:

const LoginServerQuery = gql`
    query LoginServerQuery {
        loggedInUser {
            id
        }
    }
`;

I need to use the returned ID in another query which is called from the same React component. Here Ive hardcoded "xxxxxxxxxxxxx" which is where the dynamic user ID needs to go:

const LocationQuery = gql`
    query LocationsQuery {
        User(id: "xxxxxxxxxxxxx") {
            location {
                name
            }
        }
    }
`;

Evanss · Accepted Answer · 2018-02-20T10:22:15.923

If you import compose like so:

import { graphql, compose } from 'react-apollo';

Then you can pass the props to the second query with this:

const LoginServerQuery = gql`
    query LoginServerQuery {
        loggedInUser {
            id
        }
    }
`;

const LocationsQuery = gql`
    query LocationsQuery($userId: ID) {
        User(id: $userId) {
            name
            location {
                machineName
            }
        }
    }
`;

export default compose(
    graphql(LoginServerQuery, { name: 'LoginServerQuery' }),
    graphql(LocationsQuery, {
        name: 'LocationsQuery',
        options: ownProps => ({
            variables: {
                userId: ownProps.LoginServerQuery.loggedInUser.id,
            },
        }),
    }),
)(LocationsPage);

UPDATE - Actually this isn't working well. If Im on a different page, I refresh, then navigate to this page it errors. However If I then refresh when on this page it works fine.

UPDATE - I think it was a Graphcool issue. The other page that I was refreshing on was also returning the User. I needed to return the ID for the User in both React components, otherwise the caching got confused. After adding the ID field it now works.

https://www.graph.cool/forum/t/the-store-already-contains-an-id-of/218

Hi, I'm new in apollo. Does the order of composing matter from top to bottom? — Jeaf Gilbert, Nov 08 '20 at 05:10
does this mean that both queries will get executed within a single request-response pair ? — Ajmal Moochingal, Jan 13 '21 at 14:05

score 1 · Answer 2 · answered May 19 '18 at 11:16

This can be done as above, ensure you use skip property as your first query will be undefined initially:

export default compose(
  graphql(firstQuery, {
    name: 'firstQuery'
  }),
  graphql(secondQuery, { 
    name: 'secondQuery',
    skip: ({ firstQuery }) => !firstQuery.data,
    options: ({firstQuery}) => ({
      variables: {
         var1: firstQuery.data.someQuery.someValue
      }
    })
  })
)

See here: How to chain two GraphQL queries in sequence using Apollo Client

Use result for first query in second query with Apollo Client?

2 Answers2

Linked