[HELP] Both a query and a mutation in one react component

apollo
1

Hi all,

So I have a form component that needs to get the current data and then have the ability to update the data.

Here is my code:

// Default proptypes for CreateFleet component
editFleetComponent.propTypes = {
	data: React.PropTypes.shape({
        editFleetQuery: React.PropTypes.object,
    }).isRequired,
    mutate: React.PropTypes.func.isRequired,
    router: React.PropTypes.object.isRequired,
};

// GraphQL Query
const submit = gql`
	query editFleetQuery( $id: ID ) {
		editFleetQuery( id: $id ) {
			title,
            owner,
            content,
            fc,
            type,
            doctrine,
            startdate,
            length
		}
	}

    mutation editFleet ( $title: String, $owner: String!, $content: String, $fc: String, $type: String, $doctrine: String, $startdate: String, $length: String  ) {
        createFleet( title: $title, owner: $owner, content: $content, fc: $fc, type: $type, doctrine: $doctrine, startdate: $startdate, length: $length ) {
            title,
            owner,
            content,
            fc,
            type,
            doctrine,
            startdate,
            length
        }
    }
`;

// Submit the mutation to the CreateFleet component
const editFleet = graphql( submit )( editFleetComponent );

// Export the component and the changes!
export default editFleet;

I get the following error when I then go to that route: Uncaught Error: Queries must have exactly one operation definition.

So, what’s the best way to be able to have both a query and a mutation on a single react component?

Cheers!

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

const query = gql`...`;
const mutation1 = gql`...`;
const mutation2 = gql`...`;
...

export default compose(
    graphql(query), 
    graphql(mutation1, { name: 'mutation1' }), 
    graphql(mutation2, { name: 'mutation2' })
)(Component);
4 Likes