How to integrate GraphQL with Redux in React Native
This article mainly focus on those who are thinking to start their project in React Native using GraphQL and Redux. It is not necessary to combine them. You can also start by taking one of them. Each service has their own great provider that can handle your project individually. However, If you integrate both, Then I am sure you will get something different to make your project more flexible, auto scaling and easily adoptable to handle on more complex situations. Let’s begin with Redux
Redux is a predictable state container for JavaScript apps. It helps you write applications that behaves consistently. If you are new to Redux then this link will be helpful to get started.
This is basic diagram of Redux. Dumb(React) component is wrapped by Smart component which is often called as Higher Order Component. It passes data as props to the dumb component. When something happens or dispatch actions from component it notify to the reducers. Reducers maintain different state values from different sources. Store is listening to the Reducers. And when something gets on store, The changes passes on smart component. Store is nothing but a large JavaScript object that holds multiple state of an entire application. Store provides a new object every time when changes occur which is often called immutable JavaScript that means it never change the object value once it has been set on object.
Code Example (React Redux)
GraphQL is a query language for APIs and a runtime fulfilling expected data in desired format. It provides a complete and understandable description of data in your APIs and give full power to the client to design your own data model in client side instead of designing on server side that makes easier to evolve APIs over time. Commonly RESTFull APIs has designed on server side by server programmer.
As our application becomes more and more complex, It starts to show their weaknesses. Over fetching of data, designed on specific format, and misunderstanding of data model. Even, It becomes hard to maintain over the time because changes on data model requires significant amount of planning and estimation to ensure that system does not affected.
Apollo client is client library for GraphQL that provides interface between server and client side GraphQL data.
client.js
This is the standard setup of Apollo client. As you can see here the websocket client has used for real time notification. For API_KEY, use Graphcool API Endpoints (Simple and Subscriptions)
Code Example (React Apollo)
If we combine them then their code implementation looks like
Code Example (Redux + Apollo Client)
Now, We will discuss thoroughly by taking this example. As you can see above redux diagram Actions call third party APIs. The APIs can be designed according to project requirements. MongoDB, Oracle, Firebase, Graphcool these are most popular Graph databases. In this article, I will discuss about Graphcool and Its integration part.
If you are new to Graphcool then please check this link to get some ideas. Graphcool provides two APIs, Simple and Relay. Here we will discuss Simple API. If you are interested to implement Relay then you can configure without redux for more detail information Please check this link
Graphcool Simple API provides following apis
Queries: It is automatically generated query provided by Simple API to fetch node data of specific type. Type defines the structure of data. Here is link for more detail information.
Example Query
actions/graphql/queries.js
This example query fetches all latest ads with owners. The schema looks like
If type is Ad, then its query implementation is AllAds. Just like the plural form of English language.
Mutations: Similar to queries. All mutations are generated automatically. The basic mutations are CREATED, UPDATED, DELETED.
If you want to create a new node for specific type then Create Mutation is used.
Update mutation is used to update/modify on the specific node of type.
Delete mutation performs delete node of specific type
Code Example
actions/graphql/mutations.js
Subscriptions
It allows you a real time notifications when node is created, updated or deleted. These subscriptions are also generated automatically.
actions/graphql/subscriptions.js
These are the just basic implementation of Simple API. Now, we are going to integrate with Redux in React Native.
Let’s create a provider AdsList. Redux provides a HOC (Higher Order Component) that wraps the react(dumb) component. When store gets data from Actions API then it passes to the dumb component as props.
providers/AdsList.js
components/AdsList.js
This is react (dumb) component that calls api on componentWillMount. When data is available then it renders.
actions/Ads.js
This is Actions method. When Actions dispatch fetchAds from React Component. It calls here. You can also setup other apis here like Firebase, RESTFull API .. etc.
reducers/Ads.js
Actions send data to the Reducer. This is implementation of Immutable JS. Each time action is dispatches, It sends a new JavaScript Object.
This is all about Ads listing implementation. Now, What happens if someone creates an ad. For this let’s create a file
providers/CreateAd.js: It Provides mutation interface where user can create. The code below provides user and ad create mutations.
components/CreateAd.js: This is the implementation of create mutations. When user try to create an ad, we first check the user. If the user is not available then we create and assign to an ad.
This is the surface implementation of how we can integrate GraphQL with Redux in React Native. Hope, This article somehow provides an idea to start your own project.
Enjoy! Happy Coding.
