Redux-wasp-apollo NPM

redux-wasp-apollo

v0.2.0 (beta)

Provides integration between redux-wasp and apollo-link-state.

For the base query, mutation, and subscription, check out wasp-graphql.

For additional features unique to Redux, check out redux-wasp.

For a live, full-stack application showcasing redux-wasp in action, go here.

Purpose

Updating to Apollo 2.0+ and don't want to completely remove redux store/state? Just use ReduxWaspApollo to bridge the gap between the two! Pass in the new data you need to update Apollo's Cache with and let ReduxWaspApollo do the rest.

Usage

Pass your Apollo Client down as a prop. Pass props into the ReduxWaspApollo functions.

Example

index.js

import React from 'react';
import { Provider } from 'react-redux';
import store from './store';
import ReactDOM from 'react-dom';
import App from './components/app';

import { ApolloProvider } from 'react-apollo';
import { ApolloClient } from 'apollo-client';
import { HttpLink } from 'apollo-link-http';
import { InMemoryCache } from 'apollo-cache-inmemory';

const client = new ApolloClient({
  link: new HttpLink({ uri: 'http://localhost:3000/graphql' }),
  cache: new InMemoryCache()
});

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

app.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import * as queries from './queries/queries';

// Wasp Links
import WaspLinkMutate from 'WaspReduxApolloLinkMutate';
import WaspLinkQuery from 'WaspReduxApolloQuery';

// Wasp Fetch
import WaspFetch from 'WaspFetch';

let API = 'http://localhost:3000/graphql';

const mapStateToProps = state => {
  return {
    user: state
  };
};
class App extends Component {
  constructor(props) {
    super(props);
  }

  getUsers(e, props) {
    e.preventDefault();
    // Wasp Query usage
    // Passing in props with Client passed down, as well as, the query to be used
    WaspLinkQuery(props, queries.getAllUsers);
    // Get information with WaspFetch
    WaspFetch(API, queries.getAllUsersWaspFetch);
  }
  render() {
    return (
      <div>
        <button onClick={e => this.getUsers(e, this.props)}>Get Users</button>
      </div>
    );
  }
}

export default connect(mapStateToProps)(App);

queries.js

import gql from 'graphql-tag';

let addUser = gql`
  mutation addUser($name: String!, $pass: String!) {
    addUser(name: $name, password: $pass) {
      userName
      userPass
    }
  }
`;

let getUser = gql`
  query($id: ID!) {
    user(id: $id) {
      userName
    }
  }
`;
let getAllUsers = gql`
  {
    getUsers {
      userName
    }
  }
`;

export { addUser, getUser, getAllUsers };