How to fetch data with apollo and react native

Question

I've been able of making a simple graphql server with express-graphql.

In http://localhost:8080/graphql for the query:

    {
      grocers {
        _id
        name
        description
        location
      },
      products(grocerId: "585676ef987ed341fed7fdd2") {
        name
      }
    }

I get the following:

{
  "data": {
    "grocers": [
      {
        "_id": "58567074987ed341fed7fcb1",
        "name": "Martina",
        "description": "Las mejores verduras de la alpujarra",
        "location": "Ugíjar"
      },
      {
        "_id": "585676ef987ed341fed7fdd2",
        "name": "Antonio",
        "description": "Leña y calorcito para todos!",
        "location": "Ugíjar"
      }
    ],
    "products": [
      {
        "name": "Concierto de guitarra"
      }
    ]
  }
}

So far so good. Now I want to query from React Native. I've been trying to do so with the Apollo client. For now, i've been able to query with the vanilla method as explained in their docs, and I get the correct results.

But now i'm struggling for doing it with the react apollo tool as explained here http://dev.apollodata.com/react/. Here's the code:

// ...

const networkInterface = createNetworkInterface({ uri: 'http://localhost:8080/graphql' });

const client = new ApolloClient({
  networkInterface
});

class Alpuzon extends Component {

  constructor() {
    super(...arguments);

  }

  _renderScene(route, navigator) {
    if (route.id === 1) {
      return <AlpuzonPage navigator={navigator} />
    } else if (route.id === 2) {
      return <PageTwo navigator={navigator} />
    }

    return false;
  }

  _configureScene() {
    return Navigator.SceneConfigs.FloatFromRight;
  }

  render() {
    return (
      <ApolloProvider client={client}>
        <Navigator
          initialRoute={{ id: 1 }}
          renderScene={this._renderScene}
          configureScene={this._configureScene}
        />
      </ApolloProvider>
    );
  }
}

// ...

let AlpuzonPage = React.createClass({

  _handlePress() {
    this.props.navigator.push({id: 2});
  },

  render() {

    const getGrocersQuery = gql`query getGrocersQuery { grocers { name } }`;

    class GrocerListView extends Component {
      render() {
        <ListView
          dataSource={data.grocers}
          renderRow={(obj) => <Text>{obj.name}</Text>}
        />
      }
    }

    GrocerListView.propTypes = {
      data: PropTypes.shape({
        loading: PropTypes.array.isRequired,
        grocers: PropTypes.array
      }).isRequired
    };

    const GrocerListViewWithData = graphql(getGrocersQuery)(GrocerListView);

    return (
      <View style={{ flex: 1, flexDirection: 'column'}}>
        <GrocerListView />
      </View>
    );
  }
});

... I don't know exactly how apollo works, I'm also new to React Native and GraphQl so basically i'm fairly lost. The documentation doesn't help me much :/

Answer 1

• You are defining GrocerListViewWithData but only use GrocerListView in AlpuzonPage.
• In GrocerListView you should access this.props.data instead of data and you also have to wait for this.props.data.loading to finish loading

This is the updated code:

let AlpuzonPage = React.createClass({

  _handlePress() {
    this.props.navigator.push({id: 2});
  },

  render() {

    return (
      <View style={{ flex: 1, flexDirection: 'column'}}>
        <GrocerListViewWithData />
      </View>
    );
  }
});

class GrocerListView extends Component {
  render() {
    if (this.props.data.loading) {
      return (<div>Loading</div>)
    }

    <ListView
      dataSource={this.props.data.grocers}
      renderRow={(obj) => <Text>{obj.name}</Text>}
    />
  }
}

GrocerListView.propTypes = {
  data: PropTypes.shape({
    loading: PropTypes.array.isRequired,
    grocers: PropTypes.array
  }).isRequired
};

const getGrocersQuery = gql`query getGrocersQuery { grocers { name } }`;

const GrocerListViewWithData = graphql(getGrocersQuery)(GrocerListView);

If you want to experiment with a working example for React Native with Apollo, check Learn Apollo, there is also a React Native and an Exponent JS track :)