GraphQL 查询通过 connect() 传递 mapQueriesToProps 不触发

Question

所以，我试图将 graphQL 查询的结果设置为 mapQueriesToProps，然后通过 connect() 将结果传递到我的应用程序的主界面/视图，但查询没有触发（由 devTools 确认):

我的代码如下：

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;

将 App.js 导入到的我的 app.js：

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

我忽略了什么？

Answer 1

我通过以下操作解决了这个问题：

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