How to use the react-apollo.graphql function in react-apollo

};

export default compose(
  graphql(gql(companyQueries.companyDetail), {
    name: 'companyDetailQuery',
    options: ({ data }) => ({
      variables: {
        _id: data.companyId
      }
    })
  }),
  // mutations
  graphql(gql(customerMutations.customersAdd), {
    name: 'customersAdd'
  }),
  graphql(gql(companyMutations.companiesEditCustomers), {
    name: 'companiesEditCustomers'
  })
)(CustomerAssociateContainer);

disabled={!dirty || isSubmitting}>        
        Reset
      

      <button disabled="{isSubmitting}" type="submit" color="primary">
        Submit
      </button>

      {/* values.user_id ?  : null */}
    
  );
};

export default compose(  
  graphql(AdminPageQuery, {name: 'adminPageQuery'}),
  graphql(assignPermissionsMutation, {name: 'assignPermissionsMutation'}),
)(formikEnhancer(RolesForm));

}
const QUERY = gql`
  query DilithiumStress($simulatorId: ID!) {
    reactors(simulatorId: $simulatorId) {
      id
      alphaLevel
      alphaTarget
      betaLevel
      betaTarget
      model
      heat
    }
  }
`;

export default graphql(QUERY, {
  options: ownProps => ({
    fetchPolicy: "cache-and-network",
    variables: { simulatorId: ownProps.simulator.id }
  })
})(DilithiumStress);

)
  }
}

export default compose<{}, {}, {}, {}, OwnProps>(
  connect(
    (state, ownProps) => {
      return {}
    },
    { sendNotification }
  ),
  graphql(UPDATE_POST_MUTATION),
  graphql(POST_QUERY, {
    options: (props) => {
      return {
        variables: {
          id: props.params.id
        }
      }
    }
  }),
  withIndicator()
)(EditPost)

paddingBottom: 20,
    color: colors.gray04,
  },
});


const ListingsQuery = gql`
  query {
    multipleListings{
      title,
      description
    }
  }
`

const ExploreContainerTab = graphql(ListingsQuery)(ExploreContainer);

export default ExploreContainerTab;

run: {
      starts_at: run.starts_at,
      schedule_note: run.schedule_note,
      title_suffix: run.title_suffix,
      room_ids: run.rooms.map(room => room.id),
    },
  };
};

@withRouter
@flowRight([
  graphql(EventAdminEventsQuery),
  graphql(CreateFillerEvent, { name: 'createFillerEvent' }),
  graphql(CreateRun, { name: 'createRun' }),
  graphql(DropEvent, { name: 'dropEvent' }),
  graphql(UpdateEvent, { name: 'updateEvent' }),
  graphql(UpdateRun, { name: 'updateRun' }),
])
@GraphQLQueryResultWrapper
class FillerEventAdmin extends React.Component {
  static propTypes = {
    data: GraphQLResultPropType(EventAdminEventsQuery).isRequired,
    history: PropTypes.shape({
      push: PropTypes.func.isRequired,
    }).isRequired,
    createFillerEvent: PropTypes.func.isRequired,
    createRun: PropTypes.func.isRequired,
    dropEvent: PropTypes.func.isRequired,
    updateEvent: PropTypes.func.isRequired,
    updateRun: PropTypes.func.isRequired,
  };

import { graphql } from 'react-apollo';
import dotProp from 'dot-prop-immutable';
import Spinner from '@mozilla-frontend-infra/components/Spinner';
import { withStyles } from '@material-ui/core/styles';
import PlusIcon from 'mdi-react/PlusIcon';
import Dashboard from '../../../components/Dashboard';
import Search from '../../../components/Search';
import SecretsTable from '../../../components/SecretsTable';
import HelpView from '../../../components/HelpView';
import Button from '../../../components/Button';
import { VIEW_SECRETS_PAGE_SIZE } from '../../../utils/constants';
import ErrorPanel from '../../../components/ErrorPanel';
import secretsQuery from './secrets.graphql';

@hot(module)
@graphql(secretsQuery, {
  options: () => ({
    fetchPolicy: 'network-only',
    variables: {
      secretsConnection: {
        limit: VIEW_SECRETS_PAGE_SIZE,
      },
    },
  }),
})
@withStyles(theme => ({
  plusIconSpan: {
    ...theme.mixins.fab,
  },
}))
export default class ViewSecrets extends Component {
  state = {

import IndexedEntry from '../../../../components/IndexedEntry';
import { ARTIFACTS_PAGE_SIZE } from '../../../../utils/constants';
import ErrorPanel from '../../../../components/ErrorPanel';
import artifactsQuery from './artifacts.graphql';
import indexedTaskQuery from './indexedTask.graphql';

@hot(module)
@graphql(indexedTaskQuery, {
  name: 'indexedTaskData',
  options: props => ({
    variables: {
      indexPath: `${props.match.params.namespace}.${props.match.params.namespaceTaskId}`,
    },
  }),
})
@graphql(artifactsQuery, {
  name: 'latestArtifactsData',
  options: ({ indexedTaskData }) => ({
    variables: {
      skip: !indexedTaskData.indexedTask,
      taskId: indexedTaskData.indexedTask && indexedTaskData.indexedTask.taskId,
      entryConnection: {
        limit: ARTIFACTS_PAGE_SIZE,
      },
    },
  }),
})
export default class IndexedTask extends Component {
  state = {
    indexPathInput: `${this.props.match.params.namespace}.${this.props.match.params.namespaceTaskId}`,
  };

}

ChatRoomCreateForm.propTypes = {
  updateChannel: PropTypes.func.isRequired,
  onHide: PropTypes.func.isRequired,
  tune: PropTypes.func.isRequired,
  mutate: PropTypes.func.isRequired,
  alert: PropTypes.func.isRequired,
};

const mapDispatchToProps = (dispatch) => ({
  updateChannel: (name, chatroom) => dispatch(updateChannel(name, chatroom)),
  alert: (message) => dispatch(nAlert(message)),
});

const withMutation = graphql(CreateChatRoomMutation);

export default compose(
  connect(
    null,
    mapDispatchToProps,
  ),
  withMutation,
  withModal({
    header: 'New ChatRoom',
    footer: {
      confirm: true,
      close: true,
    },
  }),
)(ChatRoomCreateForm);

unpublish: () => mutate({
        variables: {
          repoId: ownProps.repoId
        },
        refetchQueries: [
          {
            query: getRepoWithPublications,
            variables: {
              repoId: ownProps.repoId
            }
          }
        ]
      })
    })
  }),
  graphql(getRepoWithPublications)
)(CurrentPublications)