React Native / MobX / Apollo GraphQL

ApolloClient.js

// utils/ApolloClient.js
import ApolloBoost from 'apollo-boost';
import { AsyncStorage } from 'react-native';
import Config from '../config';

const client = () => {
  return new ApolloBoost({
    uri: Config.API_URL,
    request: async operation => {
      const authToken = await AsyncStorage.getItem('AUTH_TOKEN');
      if (authToken) {
        operation.setContext({
          headers: {
            Authorization: `Bearer ${authToken}`,
          },
        });
      }
    },
  });
};

export default client;

ApolloClientStore.js

// stores/index.js
import ApolloClient from './ApolloClient';
import UserStore from './UserStore';

class RootStore {
  constructor() {
    this.ApolloClient = new ApolloClient(this);
    this.UserStore = new UserStore(this);
  }
}

export default new RootStore();


// stores/ApolloClient.js
import client from '../utils/ApolloClient';

const apolloClient = client();

class Store {
  constructor(RootStore) {
    this.RootStore = RootStore;
    this.client = apolloClient;
  }
}

export default Store;

MobxRnnProvider.js

// https://gist.github.com/megahertz/3aad3adafa0f7d212b81f5e371863637

// With Apollo:
// https://github.com/kanzitelli/react-native-navigation-mobx-boilerplate/issues/3#issuecomment-348650554
// https://gist.github.com/mjyoung/6b1e1d1c0d3a6ac8b56c1d223d77793e
import React, { Children } from 'react';
import { Provider } from 'mobx-react/native';
import { ApolloProvider } from 'react-apollo';

const SPECIAL_REACT_KEYS = { children: true, key: true, ref: true };

export default class MobxRnnProvider extends Provider {
  props: {
    store: Object,
  };

  context: {
    mobxStores: Object,
  };

  getChildContext() {
    const stores = {};

    // inherit stores
    const baseStores = this.context.mobxStores;
    if (baseStores) {
      const keys = Object.keys(baseStores);
      keys.forEach(key => {
        stores[key] = baseStores[key];
      });
    }

    // add own stores
    const keys = Object.keys(this.props.store);
    keys.forEach(key => {
      if (!SPECIAL_REACT_KEYS[key]) {
        stores[key] = this.props.store[key];
      }
    });

    return {
      mobxStores: stores,
    };
  }

  // The render() function below can be removed if Apollo / GraphQL is not needed.
  render() {
    /* eslint-disable dot-notation */
    return (
      <ApolloProvider client={this.props.store['ApolloClient'].client}>
        {Children.only(this.props.children)}
      </ApolloProvider>
    );
  }
}