GraphQL query to pass mapQueriesToProps via connect() not firing

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));