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

componentWillMount() {
    const { data } = this.props;

    // lister for all conversation changes for this customer
    data.subscribeToMore({
      document: gql(graphqlTypes.conversationsChangedSubscription),
      variables: { customerId: connection.data.customerId },
      updateQuery: () => {
        this.props.data.refetch();
      },
    });
  }
}

...conversationDetail,
            messages: [...messages, message]
          })
        });

        if (prevEntry) {
          return next;
        }

        return next;
      }
    });

    // listen for conversation changes like status, assignee
    conversationDetailQuery.subscribeToMore({
      document: gql(subscriptions.conversationChanged),
      variables: { _id: currentConversationId },
      updateQuery: () => {
        this.props.conversationDetailQuery.refetch();
      }
    });
  }

totalIntegrationsCountQuery: PropTypes.object,
  channelDetailQuery: PropTypes.object,
  history: PropTypes.object,
  location: PropTypes.object
};

//When there is currentChannel id
const ChannelsWithCurrentContainer = compose(
  graphql(gql(queries.channelDetail), {
    name: 'channelDetailQuery',
    options: ({ currentChannelId }) => ({
      variables: { _id: currentChannelId || '' },
      fetchPolicy: 'network-only'
    })
  }),
  graphql(gql(queries.integrationsCount), {
    name: 'totalIntegrationsCountQuery',
    options: ({ currentChannelId }) => ({
      variables: { channelId: currentChannelId || '' }
    })
  })
)(ChannelsWithCurrent);

//Getting lastChannel id to currentChannel
const ChannelsWithLast = props => {
  const { lastChannelQuery } = props;
  const lastChannel = lastChannelQuery.channelsGetLast || {};
  const extendedProps = { ...props, currentChannelId: lastChannel._id };

  return ;
};

const updatedProps = {
    ...props,
    item: {},
    articles: getArticleListQuery.getKbArticleList,
    save,
  };
  return ;
};

NewCategoryContainer.propTypes = {
  getArticleListQuery: PropTypes.object,
  listRefetch: PropTypes.func,
};

export default compose(
  graphql(gql(queries.getArticleList), {
    name: 'getArticleListQuery',
    options: () => ({
      fetchPolicy: 'network-only',
    }),
  }),
)(NewCategoryContainer);

return ;
  }
}

ChannelsWithCurrent.propTypes = {
  currentChannelId: PropTypes.string,
  totalIntegrationsCountQuery: PropTypes.object,
  channelDetailQuery: PropTypes.object,
  history: PropTypes.object,
  location: PropTypes.object
};

//When there is currentChannel id
const ChannelsWithCurrentContainer = compose(
  graphql(gql(queries.channelDetail), {
    name: 'channelDetailQuery',
    options: ({ currentChannelId }) => ({
      variables: { _id: currentChannelId || '' },
      fetchPolicy: 'network-only'
    })
  }),
  graphql(gql(queries.integrationsCount), {
    name: 'totalIntegrationsCountQuery',
    options: ({ currentChannelId }) => ({
      variables: { channelId: currentChannelId || '' }
    })
  })
)(ChannelsWithCurrent);

//Getting lastChannel id to currentChannel
const ChannelsWithLast = props => {

};

const ConversationDetailContainer = compose(
  graphql(gql(queries.conversationDetail), {
    name: 'conversationDetailQuery',
    options: ({ currentConversationId }) => {
      return {
        notifyOnNetworkStatusChange: true,
        variables: { _id: currentConversationId }
      };
    }
  }),
  graphql(gql(mutations.conversationsChangeStatus), {
    name: 'changeStatusMutation'
  }),
  graphql(gql(mutations.markAsRead), {
    name: 'markAsReadMutation'
  })
)(ConversationDetail);

ConversationDetail.contextTypes = {
  currentUser: PropTypes.object
};

/*
 * We will use this component when there is not current conversation id
 * in query string
 */
const LastConversation = props => {
  const { lastConversationQuery } = props;

  if (lastConversationQuery.loading) {

return <details>;
  }
}

DetailsContainer.propTypes = {
  id: PropTypes.string,
  channelId: PropTypes.string,
  queryParams: PropTypes.object,
  conversationDetailQuery: PropTypes.object,
  subscribeToNewMessages: PropTypes.func,
  data: PropTypes.object,
};

export default compose(
  graphql(gql(queries.conversationDetail), {
    name: 'conversationDetailQuery',
    options: ({ id }) =&gt; ({
      variables: {
        _id: id,
      },
    }),
  }),
)(DetailsContainer);
</details>

return {
        variables: {
          memberIds: [userId],
        },
        fetchPolicy: 'network-only',
      };
    },
  }),
  graphql(gql(queries.brandList), {
    name: 'brandsQuery',
    options: () => ({
      fetchPolicy: 'network-only',
    }),
  }),
  graphql(gql(queries.tagList), {
    name: 'tagsQuery',
    options: () => {
      return {
        variables: {
          type: TAG_TYPES.CONVERSATION,
        },
        fetchPolicy: 'network-only',
      };
    },
  }),
  graphql(gql(queries.conversationCounts), {
    name: 'conversationCountsQuery',
    options: () => {
      return {
        variables: {
          params: FlowRouter.current().queryParams,

};

NewTopicContainer.propTypes = {
  getCategoryListQuery: PropTypes.object,
  getBrandListQuery: PropTypes.object,
  listRefetch: PropTypes.func,
};

export default compose(
  graphql(gql(queries.getCategoryList), {
    name: 'getCategoryListQuery',
    options: () => ({
      fetchPolicy: 'network-only',
    }),
  }),
  graphql(gql(queries.getBrandList), {
    name: 'getBrandListQuery',
    options: () => ({
      fetchPolicy: 'network-only',
    }),
  }),
)(NewTopicContainer);

//Getting lastChannel id to currentChannel
const ChannelsWithLast = props => {
  const { lastChannelQuery } = props;
  const lastChannel = lastChannelQuery.channelsGetLast || {};
  const extendedProps = { ...props, currentChannelId: lastChannel._id };

  return ;
};

ChannelsWithLast.propTypes = {
  lastChannelQuery: PropTypes.object
};

const ChannelsWithLastContainer = compose(
  graphql(gql(queries.channelsGetLast), {
    name: 'lastChannelQuery'
  })
)(ChannelsWithLast);

//Main channel component
const MainContainer = props => {
  const { history } = props;
  const currentChannelId = routerUtils.getParam(history, 'id');

  if (currentChannelId) {
    const extendedProps = { ...props, currentChannelId };

    return ;
  }

  return ;