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 Boost. Apollo Boost helps you include packages that are essential for building an Apollo app.

  1. Integrate Apollo Client into your application

    Next, create an instance of your Apollo Client and connect it to React. Open the index.js file of your app and import ApolloClient from apollo-boost and add the endpoint for the GraphQL server into the uri property of the client config object. Refer Connect your client to React to know more.

    Additional Resource: You can refer to the Getting Started document to know more about how to install and integrate the client into your app.

  2. 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/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.

  3. 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  'graphql-tag';  
      
    const FETCH_ALL_PRODUCT = gql `query {  
        all_product(locale:"en-us") {  
            items {  
                title  
                description  
                price  
                featured_image {  
                    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.

On This Page

top-arrow