Question

我们目前正在努力使用Apollo Client来管理反应应用程序中的本地状态。我们能够构建一个非常简单的示例，我们只根据突变的结果显示div。突变的效果应该只是显示警告信息并且不返回任何内容。

我们提出了以下非常简单的示例代码：

文件index.js：

import React from 'react';
import ReactDOM from 'react-dom';
import { ApolloClient } from 'apollo-client';
import { ApolloProvider } from 'react-apollo';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { withClientState } from 'apollo-link-state';

import App from './App';

const resolvers = {
  Mutation: {
    setData: (_, {myBool}) => {
      alert(myBool);
      return null;
    }
  }
};

const client = new ApolloClient({
  cache: new InMemoryCache(),
  link: withClientState({ resolvers })
});

ReactDOM.render(
  <ApolloProvider client={client}>
      <App />
  </ApolloProvider>,
  document.getElementById('root')
);

File App.js：

import React, { Component, Fragment } from 'react';
import gql from 'graphql-tag';
import { Mutation } from 'react-apollo';

class App extends Component {

  setData = () => {
    alert('setData is called');
    const SET_DATA = gql`
      mutation SetData($myBool: Boolean!) {
        setData(myBool: $myBool) @client
      }
    `;
    return (
      <Mutation mutation={SET_DATA} variables={{ myBool: true }}>
        {(_, { loading, error }) => (
          <div>
            {loading && <p>...loading...</p>}
            {error && <p>ERROR ! Try reloading.</p>}
          </div>
        )}
      </Mutation>
    );
  };

  render() {

    return (
      <Fragment>
        <h1>App</h1>
        {this.setData()}
      </Fragment>
    );
  }
}

export default App;

有人可以告诉我们为什么我们在setData（）解析器（来自文件index.js）中调用的警报方法在页面加载时不会被调用吗？

Apollo Client 2似乎不处理本地状态管理

0 个答案: