Rishi Raj Jain
Rishi Raj Jain's Blog

Rishi Raj Jain's Blog

Mobile, Web Apps? Get started with React Native. API? Use Apollo GraphQL.

Mobile, Web Apps? Get started with React Native. API? Use Apollo GraphQL.

Rishi Raj Jain's photo
Rishi Raj Jain
·Jul 20, 2020·

4 min read

Subscribe to my newsletter and never miss my upcoming articles

United: GraphQL, Apollo and React Native (by Freecodecamp)

It’s more than a year I’ve been doing web development and when I came across React, React Native, GraphQL API, and Apollo GraphQL, I was in complete awe to what they could do and how much time would they save! Whoa, hold on hold on, don’t get scared by the beauty of them already. This blog will keep you informed on what is React Native, how GraphQL is better than Rest API, and what purpose does Apollo GraphQL (Client) serves.

What are native applications?

Native applications are compiled into the machine language of the running CPU. For example, Windows and Mac executable apps are in x86 machine language, while mobile apps are ARM based (see x86 and ARM). (Source: PCMAG)

React Native — A framework for building native apps using react.

As widely advertised, react-native combines native development with React, a JavaScript library for building user interfaces. It enables the creation of purely native apps, that maps to the platform’s UI elements. So be it Web, iOS, or Android, code once and enjoy! Heard of Instagram? React Native is currently being used on Instagram, Tesla, Uber Eats, Discord, and famous website builder WiX.

An advantage of using React Native is the option to utilize Expo. Expo’s tools and services such as:

  1. Templates: Lazy? Setup React native (with web) & navigation with `tabs` template.

Available templates with Expo CLI

  1. Social Authentication: Enable log in with the Facebook and Google native SDKs, or support any browser-based auth flow.
  2. Push Notifications: Send and receive cross-platform push notifications with a few lines of JavaScript.
  3. Icons: Set of icons on top of FontAwesome & Ionicons.
  4. Native Graphics: Expo includes a WebGL-compatible API called EXGL.

Cool, right? Try it in the browser: https://snack.expo.io/

Learn and explore more on React Native Tutorial & Expo Documentation

GraphQL is here! Time to REST is over.

GraphQL is a query language for an API, and a server-side runtime for executing queries by using a type system one’s define for the data. GraphQL isn’t tied to any specific database or storage engine and is instead backed by your existing code and data.

Image from GraphQL

Major Advantages of GraphQL over Rest API:

  1. With a REST API, one would typically gather the data by accessing multiple endpoints, say /shops/ to fetch the initial data and then /shops//items to get all the items that would be available for the particular shop, in GraphQL a simple query to a single endpoint to the GraphQL server is sent which will return the required JSON.
  2. No over fetching: Overfetching means that a client downloads more information than is actually required in the app. While one may hit /shops with the sole purpose to request the names of the shops, obtaining the same with rest API might also give things other than those required (say shop images as well in the JSON). With GraphQL, this kind of mutation is a cakewalk.
  3. Easy resolution to under fetching: Underfetching generally means that a specific endpoint doesn’t provide enough of the required information. This can escalate to a situation where a client needs to first download a list of elements but then needs to make one additional request per element to fetch the required data. Rather than hitting multiple requests, GraphQL enables you to get this all of this in a single request.

Learn more about GraphQL and how to use it to @howtograhql

Apollo GraphQL (Client)

Simplify app development by combining APIs, databases, and microservices into a single data graph that you can query with GraphQL.

Modern Architecture Management by Apollo GraphQL

Apollo is the industry-standard GraphQL implementation, providing the data graph layer that connects modern apps to the cloud.

Apollo Client is a comprehensive state management library for JavaScript that enables you to manage both local and remote data with GraphQL.

Features of Apollo Client:

  • Declarative data fetching: No need to manually track loading states, just write queries and let it handle the rest.
  • Caching: Easier local-only modifications via querying the cache directly.
  • Local State: Manage both local and remotely fetched state with a single API.
  • Designed for modern React: Take advantage of the latest React features, such as hooks.
  • Universally compatible: Use any build setup and any GraphQL API

Create Apollo App from (apolloapp.org)

Searching the web for a starter kit? I doubt you’ll find something better than Create Apollo App, that contains the starters of a web app, or native mobile app, even a universal application and lot more on server enabled apps.

I have also made a React Native (with react-native-web), Expo, Apollo Client & GraphQL starter. Find it here at React-Native — With-Web — ApolloGraphQL-starter

That’s what I have for now. Hope this helps!

 
Share this