Skip to content
This repository was archived by the owner on Dec 18, 2025. It is now read-only.

Commit c0fdb5d

Browse files
authored
Update README.md
1 parent a5f7433 commit c0fdb5d

File tree

1 file changed

+13
-14
lines changed

1 file changed

+13
-14
lines changed

README.md

Lines changed: 13 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,18 @@
11
[![Contentstack](https://www.contentstack.com/docs/static/images/contentstack.png)](https://www.contentstack.com/)
22

3-
# Contentstack GraphQL with the Apollo Client React-Native
3+
# Build an example app using Contentstack React Native SDK, GraphQL API, and Apollo Client
4+
We have created a sample product catalog app that is built using Contentstack’s iOS SDK. The content of this app is powered by Contentstack GraphQL APIs, and the app uses Apollo client on the client side to consume GraphQL APIs.
45

5-
Apollo Client provides the best way to use GraphQL to build client applications as you can use it to quickly build a UI that fetches data with GraphQL, and you can use any JavaScript front-end.
6-
7-
Using Apollo Boost you can easily configure Apollo Client with the recommended settings in your app. Apollo Boost includes packages that are essential for building an Apollo app.
6+
This document covers the steps to get this app up and running for you. Try out the app and play with it, before building bigger and better applications.
87

98
| ![](https://github.com/contentstack/contentstack-reactnative-graphql-example/raw/master/iOS.png) | ![](https://github.com/contentstack/contentstack-reactnative-graphql-example/raw/master/Android.png)|
109
|--|--|
1110

12-
1311
## Prerequisite
1412

15-
- Use [Xcode 10.1 and later](https://developer.apple.com/xcode/)
16-
- Use Latest version of Android Studio (for Android)
17-
- React Native [setup](https://facebook.github.io/react-native/docs/getting-started.html)
13+
- Use [Xcode 10.1 and later](https://developer.apple.com/xcode/) Mac OS X 10.14 and later (for iOS)
14+
- Use Latest version of Android Studio (for Android)
15+
- React Native [setup](https://facebook.github.io/react-native/docs/getting-started.html)
1816
- [Contentstack](https://www.contentstack.com/) account
1917

2018
## Step 1: Create a stack
@@ -23,19 +21,19 @@ Log in to your Contentstack account and [create a new stack](https://www.content
2321

2422
## Step 2: Add a publishing environment
2523

26-
[Add a publishing environment](https://www.contentstack.com/docs/guide/environments#add-an-environment) to publish your content in Contentstack. Provide the necessary details as per your requirement. Read more about [environments](https://www.contentstack.com/docs/guidtens).
24+
[Add a publishing environment](https://www.contentstack.com/docs/guide/environments#add-an-environment) to publish your content in Contentstack. Provide the necessary details as per your requirement. Read more about [environments](https://www.contentstack.com/docs/guide/environments).
2725

2826
## Step 3: Import content types
2927
For this app, we need one content type: Product Here’s what it is needed for:
3028
- **Product**: Lets you add the product content into your app
3129

32-
For quick integration, we have already created the content type. [Download the content types](https://github.com/contentstack/contentstack-reactnative-graphql-example/raw/master/ContentTypes.zip) and [import](https://www.contentstack.com/docs/guide/content-types#importing-a-content-type) it to your stack. (If needed, you can [create your own content types](https:/cs/guide/content-types#rting-a-content-type). Read more about [Content Types](https://www.contentstack.com/docs/guide/content-types)
30+
For quick integration, we have already created the content type. [Download the content types](https://github.com/contentstack/contentstack-reactnative-graphql-example/raw/master/ContentTypes.zip) and [import](https://www.contentstack.com/docs/guide/content-types#importing-a-content-type) it to your stack. (If needed, you can [create your own content types](https://www.contentstack.com/docs/guide/content-types#creating-a-content-type). Read more about [Content Types](https://www.contentstack.com/docs/guide/content-types)
3331

34-
Now that all the content types arecredy, let’s add some content for your Product app.
32+
Now that all the content types are ready, let’s add some content for your Product app.
3533

3634
## Step 4: Add content
3735

38-
[Create](https://www.contentstack.com/docs/guide/content-management#add-a-new-entry) and [publish](https://www.contentstack.com/docs/guide/content-management#publish-an-entry) entries for thereti-content type.
36+
[Create](https://www.contentstack.com/docs/guide/content-management#add-a-new-entry) and [publish](https://www.contentstack.com/docs/guide/content-management#publish-an-entry) entries for the 'Product' content type.
3937

4038
Now that we have created the sample data, it’s time to use and configure the presentation layer.
4139

@@ -55,12 +53,12 @@ $ npm install apollo-boost react-apollo graphql-tag graphql --save
5553
```
5654
## Step 7: Create Apollo Client
5755

58-
Create a file named `apollo.js` and export a funtion 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)
56+
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)
5957
```
6058
import { ApolloClient } from 'apollo-client';
6159
import { HttpLink } from 'apollo-link-http';
6260
import { InMemoryCache } from 'apollo-cache-inmemory';
63-
const GRAPHQL_ENDPOINT = `https://graphql.contentstack.io/stacks/api_key?access_token=environment-specific_delivery_token&environment=environment_name`;
61+
const GRAPHQL_ENDPOINT = `https://graphql.contentstack.io/stacks/api_key/explore?access_token=environment-specific_delivery_token&environment=environment_name`;
6462
6563
const apolloClient = () => {
6664
const link = new HttpLink({
@@ -144,3 +142,4 @@ export default class Products extends React.Component {
144142
## Step 11: Build and run your application
145143

146144
Now that we have a working project, you can build and run it.
145+

0 commit comments

Comments
 (0)