Apollo GraphQL: Multiple Queries in One Component?

VikR picture VikR · Oct 30, 2016 · Viewed 9.1k times · Source

I have a component that needs to query two entirely separate tables. What do the schema, query and resolver need to look like in this case? I've googled but haven't found examples yet. Thanks in advance for any info.

UPDATE: On Slack I see there may be a way to use compose for this purpose, e.g.:

export default compose(
  graphql(query1, 
  ....),
  graphql(query2, 
  ....),
  graphql(query3, 
  ....),
  withApollo
)(PrintListEditPage)

Is there a way to have multiple declarations like this:

const withMutations = graphql(updateName, {
  props({ mutate }) {
    return {
      updatePrintListName({ printListId, name }) {
        return mutate({
          variables: { printListId, name },
        });
      },
    };
  },
});

...that come before the call to export default compose?

Answer

Daniel R. picture Daniel R. · Oct 30, 2016

The graphql function takes an optional second argument that allows you to alias the passed down property name. If you have multiple mutations you can use the name property to rename mutate as needed:

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

export default compose(
  graphql(mutation1, { name: 'createSomething' }),
  graphql(mutation2, { name: 'deleteSomething' }),
)(Component)

For more details see the complete API.