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.
An advantage of using React Native is the option to utilize Expo. Expo’s tools and services such as:
- Templates: Lazy? Setup React native (with web) & navigation with `tabs` template.
Available templates with Expo CLI
- Social Authentication: Enable log in with the Facebook and Google native SDKs, or support any browser-based auth flow.
- Icons: Set of icons on top of FontAwesome & Ionicons.
- Native Graphics: Expo includes a WebGL-compatible API called EXGL.
Cool, right? Try it in the browser: https://snack.expo.io/
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:
- 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.
- 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.
- 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)
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.
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!