GraphQL query to pass mapQueriesToProps via connect() not firing - reactjs

Question

So, I'm attempting to set the results of a graphQL query to mapQueriesToProps, and then pass the result onto the main interface/view of my app via connect(), but the query is not firing (as confirmed by devTools):
My code is as follows:
App.js
import React from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
// import { connect } from 'react-apollo';
import {
// gql,
graphql,
withApollo
} from 'react-apollo';
import gql from 'graphql-tag';
import * as actionCreators from '../actions/actionCreators';
// import client from '../apolloClient';
// import ApolloClient from 'apollo-client';
/*
Components
This is where the actual interface / view comes into play
Everything is in Main - so we import that one
*/
import Main from './Main';
const allPostsCommentsQuery = gql`
query allPostsCommentsQuery {
allPostses {
id
displaysrc
caption
likes
comments {
id
posts {
id
}
text
user
}
}
}
`;
const mapQueriesToProps = ({ ownProps, state }) => {
return {
posts: {
query: gql`
query allPostsCommentsQuery {
allPostses {
id
displaysrc
caption
likes
comments {
id
posts {
id
}
text
user
}
}
}
`,
// variables: {
// },
// forceFetch: false, // optional
// returnPartialData: false, // optional
},
};
};
export function mapDispatchToProps(dispatch) {
return bindActionCreators(actionCreators, dispatch);
}
var App = connect(
mapQueriesToProps,
mapDispatchToProps
)(Main);
export default App;
Main.js
import React from 'react';
import { Link } from 'react-router';
const Main = React.createClass({
render() {
return (
<div>
<h1>
<Link to="/">Flamingo City</Link>
</h1>
{/* We use cloneElement here so we can auto pass down props */}
{ React.cloneElement(this.props.children, this.props) }
</div>
);
}
});
export default Main;
My app.js into which App.js is imported into:
import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import { Router, Route, IndexRoute } from 'react-router'
import 'babel-polyfill';
import { ApolloProvider, graphql, gql } from 'react-apollo';
import client from './apolloClient';
/*
Import Components
*/
import App from './components/App';
import Single from './components/Single';
import PhotoGrid from './components/PhotoGrid';
/* Import CSS */
import css from './styles/style.styl';
/* Import our data store */
import store, { history } from './store';
/*
Error Logging
*/
import Raven from 'raven-js';
import { sentry_url } from './data/config';
if(window) {
Raven.config(sentry_url).install();
}
/*
Rendering
This is where we hook up the Store with our actual component and the router
*/
render(
<ApolloProvider store={store} client={client}>
{ /* Tell the Router to use our enhanced history */ }
<Router history={history}>
<Route path="/" component={App}>
<IndexRoute component={PhotoGrid} />
<Route path="/view/:postId" component={Single}></Route>
</Route>
</Router>
</ApolloProvider>,
document.getElementById('root')
);
What am I overlooking?

Answer 1

I resolved the issue by doing the following:
import React from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import {
gql,
graphql
} from 'react-apollo';
import * as actionCreators from '../actions/actionCreators';
/*
Components
This is where the actual interface / view comes into play
Everything is in Main - so we import that one
*/
import Main from './Main';
const allPostsCommentsQuery = graphql(gql`
query allPostsCommentsQuery {
allPostses {
id
displaysrc
caption
likes
comments {
id
posts {
id
}
text
user
}
}
}
`);
/*
This will bind our actions to dispatch (make the fire-able)
and make the actions available via props
*/
export function mapDispatchToProps(dispatch) {
return bindActionCreators(actionCreators, dispatch);
}
const App = connect(
mapDispatchToProps
);
export default App(allPostsCommentsQuery(Main));