响应 GraphQL Apollo 和 Redux。如何查询数据并将其放入store的initialState？

Question

如何从我的 Redux 商店中的 GraphQL/Apollo 获取数据？这是我的条目文件。

...

render(
  (
    <ApolloProvider client={client}>
      <Provider store={store}>
        <ConnectedRouter history={history}>
          <App />
        </ConnectedRouter>
      </Provider>
    </ApolloProvider>
  ),
  document.getElementById('root'),
);

这是商店

import { createStore, applyMiddleware, compose as composeRedux } from 'redux';
import { routerMiddleware } from 'react-router-redux';
import thunk from 'redux-thunk';
import createHistory from 'history/createBrowserHistory';
import rootReducer from '../reducers';

export const history = createHistory();

const initialState = {};
const enhancers = [];
const middleware = [
  thunk,
  routerMiddleware(history),
];

if (process.env.NODE_ENV === 'development') {
  const { devToolsExtension } = window;

  if (typeof devToolsExtension === 'function') {
    enhancers.push(devToolsExtension());
  }
}

const composedEnhancers = composeRedux(
  applyMiddleware(...middleware),
  ...enhancers,
);

const store = createStore(
  rootReducer,
  initialState,
  composedEnhancers,
);

export default store;

我对我的 App 组件使用了以下查询

const LOGGED_IN_USER = gql`
  query LoggedInUser {
    loggedInUser {
      id
      facebookUserId
      facebookEmail
      facebookName
      facebookPicture
      facebookLocation
    }
  }
`;

export default compose(graphql(LOGGED_IN_USER, {
  options: {
    fetchPolicy: 'network-only',
  },
}))(App);

我应该将查询从 App 移动到商店吗？我迷路了。 ;-)

Answer 1

您需要将您的reducer 与apollo 的reducer 组合起来。您可以尝试类似的方法：-

const client = new ApolloClient({
  networkInterface,
  dataIdFromObject: (o) => o.id
});

const middlewares = [thunk, logger];

const rootReducer = combineReducers({
  wlStore: wlReducer,
  apollo: client.reducer()
});

const store = applyMiddleware(...middlewares, client.middleware())(createStore)(rootReducer);

您的商店应该是这样的：-

store: {
  wlStore: {
    // redux store
  },
  apollo: {
    // apollo store
  }
}

响应 GraphQL Apollo 和 Redux。如何查询数据并将其放入store的initialState？

React GraphQL Apollo and Redux. How to query data and place it in initialState of the store?

reactjs

graphql

redux

graphcool

apollo-client