Local state management does not seem to work

Hi,

We are currently struggling using Apollo Client to manage local state in a react application. We were able to build up a very simple example where we just display a div depending on the result of a mutation. The effect of the mutation should only be to display an alert message and return nothing.

We have come up with the following very simple example code:

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

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;

Could someone please tell us why the alert method we call in the setData() resolver (from file index.js) isn’t called upon page loading?

[jwdinker]

@comteharbour

check this out…this is how i did my auth in an example.

My saveUserDataLocal stores my tokens in Local Storage ( not the cache). Apollo cache is just a javascript object that gets nuked if you reload the page unless you persist it.

authenticateUser is my server response.

[jwdinker]

@zadigus The mutation component is a render props function. In order to trigger the mutation you have to call via the function that is passed down. Currently, your function that is being passed down isn’t doing anything (highlighted in yellow), therefore the mutation is never being triggered. Hope that clears it up.