Using GraphQL with Apollo Client React Native SDK

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

In this document, we will learn 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 help you include packages that are essential for building an Apollo app.

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.

Refer the Getting Started document to know more about how to install and integrate the client into your app.

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. Refer the Using fragments doc for more details.

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

We have created an example app that demonstrates the usage of Contentstack GraphQL queries and Apollo React Native SDK. Refer this guide and create your own apps easily.

Was this article helpful?
top-arrow