Use GraphQL Queries with Apollo Client React Native SDK

Apollo is a GraphQL client that helps you consume GraphQL APIs.

This step-by-step guide explains how to use the Apollo client and Contentstack GraphQL queries to power the content of your React Native SDK apps.

Prerequisites

First, you need to install the dependencies using Apollo Client. Apollo Client helps you include packages that are essential for building an Apollo app.

1. Create Apollo Client

   Create a file named `apollo.js` and export a function that accepts a token and returns an instance of Apollo Client. You have to configure the Apollo client with the GraphQL endpoint and the token. (Replace with your own GraphQL endpoint)

   import {ApolloClient, InMemoryCache, from, HttpLink} from '@apollo/client';
    
   const GRAPHQL_ENDPOINT =
    'https://graphql.contentstack.com/stacks/<API_KEY>?environment=<ENVIRONMENT_NAME>';
    
   const apolloClient = () => {
    const link = new HttpLink({
      uri: GRAPHQL_ENDPOINT,
      headers: {
        access_token: '<ENVIRONMENT_SPECIFIC_DELIVERY_TOKEN>',
      },
    });
    
    return new ApolloClient({
      link: from([link]),
      cache: new InMemoryCache(),
    });
   };
   export default apolloClient;
   

2. Connect your Client to React

   To connect Apollo Client to React, you need to use the `ApolloProvider` component exported from `react-apollo`. The `ApolloProvider` component wraps your React app and places the client on the context, which allows you to access it from anywhere in your component tree.

   import React, {Component} from 'react';
   import {Router, Scene} from 'react-native-router-flux';
   import apolloClient from './apollo';
   import {ApolloProvider} from 'react-apollo';
   import Products from './Products';
    
   class App extends Component {
    state = {
      client: apolloClient(),
    };
    
    render() {
      return (
        <ApolloProvider client={this.state.client}>
          <Router>
            <Scene key="root">
              <Scene
                key="Products"
                component={Products}
                title="Products"
                initial={true}
              />
            </Scene>
          </Router>
        </ApolloProvider>
      );
    }
   }
    
   export default App;
   

3. Write GraphQL queries

   Contentstack provides a GraphQL playground, which is the GraphiQL interface, to test your GraphQL queries in your browser. Use this interface to write and test your queries.

   Open a browser of your choice and hit the following URL after filling the required details:

   https://www.contentstack.com/docs/developers/apis/graphql-content-delivery-api/explorer/

   Note: If you have pieces of data you may want to reuse in multiple places, make use of fragments.

4. Fetch Data Using ApolloClient

   Once you have set up ApolloProvider to connect your client to React, you can start requesting data using Query, which is a React component exported from react-apollo.

   Create the FETCH_ALL_PRODUCT component in index.js, add the following code snippet, and run it to see the Query component in action!

   import {Query} from 'react-apollo';
   import {gql} from '@apollo/client';
    const FETCH_ALL_PRODUCT = gql `
   query {
    all_product(locale: "en-us") {
      items {
        title
        description
        price
        featured_imageConnection(limit: 10) {
          edges {
            node {
              url
            }
          }
        }
      }
    }
   }
   `; 
    export  default  class  Products  extends  React.Component  { 
     render() { 
      return( 
        <Query  query = {FETCH_ALL_PRODUCT}> 
        {({ loading, error, data }) => { 
          if (loading) { 
            return <View  style={styles.container}><Text>Loading....</Text></View> 
          } 
          if (error){ 
            return <View  style={styles.container}><Text>`Error! ${error.message}`</Text></View> 
          } 
          return <FlatList 
          data = {data.all_product.items} 
          renderItem=({item}) => ( 
            <Text  numberOfLines = {1}  style= {{textAlign: "center", fontSize:  15,}}>{item.title}</Text> 
          ); 
          /> 
        }} 
        </Query> 
      ); 
    } 
   }

Example app

To create an app easily, we have an example app that demonstrates the usage of Contentstack GraphQL queries and Apollo React Native SDK.