Service.js

import React, { useState } from 'react';
import { Form, Header, Segment, Dropdown, Label, Button } from 'semantic-ui-react';
import { Query, Mutation } from 'react-apollo';
import gql from 'graphql-tag';
import MembersSelectionBox from './MembersSelectionBox';

export default ({ id, onSaved }) => {
    const [name, setName] = useState();
    return (
        <Segment>
            <Header>Service</Header>)
            <Query variables={{ id }} query={getUserServiceQuery}>
                {({ data, error, loading: loadingService, called }) => {
                    console.log('getUserService query called', called, 'data', data);
                    if (data && data.getUserService) {
                        console.log(data);
                        if (name == null) setName(data.getUserService.name);
                    }

                    return (
                        <Mutation mutation={saveServiceMutation}>
                            {(saveServiceCall, { loading: savingService, data, error, called }) => {
                                const { saveService } = data || {};
                                if (called) {
                                    onSaved(saveService);
                                }
                                return (
                                    <Form
                                        loading={(loadingService && !!id) || savingService}
                                        onSubmit={() => {
                                            const service = { id, name };
                                            console.log('saving service', service);
                                            saveServiceCall({ variables: { service } });
                                        }}>
                                        <Form.Input
                                            onChange={(e, { value }) => {
                                                setName(value);
                                            }}
                                            label="Name"
                                            placeholder="Aaron's band... "
                                            inline
                                            value={name}
                                        />
                                        {/* <MembersSelectionBox /> */}
                                        <Button loading={savingService} type="submit">
                                            Save
                                        </Button>
                                    </Form>
                                );
                            }}
                        </Mutation>
                    );
                }}
            </Query>
        </Segment>
    );
};

const saveServiceMutation = gql`
    mutation($service: ServiceInput!) {
        saveService(service: $service) {
            id
            name
        }
    }
`;

const getUserServiceQuery = gql`
    query($id: ID!) {
        getUserService(id: $id) {
            id
            name
        }
    }
`;