0

Walmart Electrode Starter React アプリに apollo を追加しようとしていますが、クライアント プロパティに関する警告が表示されます。

apollo プロバイダーを使用して、react-router ではないコンポーネントをラップすると、問題なく動作するようです。反応ルーターを追加すると、その警告が表示されますが、ページは引き続き apollo で正常にロードされます。

Warning: Failed context type: The context `client` is marked as required in `Apollo(Home)`, but its value is `undefined`.
    in Apollo(Home) (created by Connect(Apollo(Home)))
    in Connect(Apollo(Home)) (created by RouterContext)
    in RouterContext
    in Provider

app.jsx

//
// This is the client side entry point for the React app.
//

import React from "react";
import {render} from "react-dom";
import {routes} from "./routes";
import {Router} from "react-router";
import {createStore} from "redux";
import "./styles/base.css";
import rootReducer from "./reducers";
import ApolloClient, {createNetworkInterface} from "apollo-client";
import { ApolloProvider } from "react-apollo";
//
// Add the client app start up code to a function as window.webappStart.
// The webapp's full HTML will check and call it once the js-content
// DOM is created.
//

const graphUri = "https://api.graph.cool/simple/v1/foo";
window.webappStart = () => {
  const initialState = window.__PRELOADED_STATE__;
  const store = createStore(rootReducer, initialState);
  const client = new ApolloClient({
    networkInterface: createNetworkInterface({ uri: graphUri })
  });
  render(
    <ApolloProvider store={store} client={client}>
      <Router>{routes}</Router> 
    </ApolloProvider>,
    document.querySelector(".js-content")
  );
};

home.jsx

import React, {PropTypes} from "react";
import {connect} from "react-redux";
import {toggleCheck, incNumber, decNumber} from "../actions";
import gql from "graphql-tag";
import { graphql } from "react-apollo";

class Home extends React.Component {
  render() {
    const props = this.props;
    const {checked, value} = props;

    const { loading, allExperiences } = this.props.data;
    if (loading) {
      return <div>Loading</div>;
    } else {

      return (

        <div>
          <div>
            <h2>Managing States with Redux</h2>
            <label>
              <input onChange={props.onChangeCheck} type={"checkbox"} checked={checked}/>
              Checkbox
            </label>
            <div>
              <button type={"button"} onClick={props.onDecrease}>-</button>
              &nbsp;{value}&nbsp;
              <button type={"button"} onClick={props.onIncrease}>+</button>
            </div>
          </div>

          <ul>
            {allExperiences.map(post =>
              <li key={post.id}>
                {post.title}
              </li>
            )}
          </ul>
        </div>
      );
    }
  }
}

Home.propTypes = {
  checked: PropTypes.bool,
  data: PropTypes.shape({
    loading: PropTypes.bool.isRequired,
    allExperiences: PropTypes.array
  }).isRequired,
  value: PropTypes.number.isRequired
};

const mapStateToProps = (state) => {
  return {
    checked: state.checkBox.checked, value: state.number.value
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    onChangeCheck: () => {
      dispatch(toggleCheck());
    },
    onIncrease: () => {
      dispatch(incNumber());
    },
    onDecrease: () => {
      dispatch(decNumber());
    }
  };
};

const getQuery = gql`
  query allExperiences { 
    allExperiences {
      id,
      title,
      subtitle,
      description
    }
  }`;
const HomeWithData = graphql(getQuery)(Home);
export default connect(mapStateToProps, mapDispatchToProps)(HomeWithData);

ルート.jsx

import React from "react";
import {Route} from "react-router";
import Home from "./components/home";

export const routes = (
  <Route path="/" component={Home}/>
);
4

0 に答える 0