DEV Community: Ayomide Daniel

Build React Native Apps: Offline-First Approach Using GraphQL and Caching

Ayomide Daniel — Wed, 14 May 2025 14:05:43 +0000

Building apps that work offline isn’t just a nice-to-have anymore, it’s essential. Network issues are real, especially in places with unstable connections. Whether it's users in low-connectivity areas or those who just want snappy experiences, handling offline gracefully is one of the most impactful upgrades you can bring to your mobile app.

In this guide, we'll walk through how to build an offline-first experience in a React Native app using Expo, GraphQL (via Apollo Client), and efficient local caching strategies that help your app shine even when the connection doesn’t.

Why Offline-First Matters

Users expect apps to "just work," even when the internet doesn’t. An offline-first approach ensures that your app can not only read data when offline but also queue mutations while offline and sync when back online.

Here’s why investing in offline support is a great move:

Better UX: Users can interact with the app even with poor/no internet
Faster perceived performance: Cached data loads instantly
Increased reliability: Your app doesn’t freeze or crash when connectivity drops
Wider market reach: Works better in emerging markets with spotty networks
User trust: Offline access builds confidence that your app "just works."

Apps that function well offline are often described by users as “smooth,” even if they don’t consciously recognize what’s different.

Apollo Client makes this possible out of the box with its normalized cache and retry link system.

Tech Stack Overview

To make this all work smoothly, we’re combining the following tools:

React Native with Expo: Fast setup, consistent development experience
Apollo Client: Handling GraphQL queries and mutations
@react-native-async-storage/async-storage: To store persistent cache data
expo-network: For detecting network availability

This combination keeps things flexible, lightweight, and scalable.

1. Set Up Apollo Client with Cache Persistence

First, let’s install the packages we’ll need::

expo install @react-native-async-storage/async-storage expo-network
npm install @apollo/client graphql

Now create a helper to initialize Apollo with cache persistence:

// lib/apollo.ts
import {
  ApolloClient,
  InMemoryCache,
  createHttpLink,
  ApolloProvider,
} from '@apollo/client';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { persistCache } from 'apollo3-cache-persist';
import { useEffect, useState } from 'react';

const cache = new InMemoryCache();
const link = createHttpLink({ uri: 'https://your-graphql-api.com/graphql' });

export const useApollo = () => {
  const [client, setClient] = useState<ApolloClient<any> | null>(null);

  useEffect(() => {
    (async () => {
      await persistCache({
        cache,
        storage: AsyncStorage,
      });
      const apolloClient = new ApolloClient({
        link,
        cache,
        connectToDevTools: true,
      });
      setClient(apolloClient);
    })();
  }, []);

  return client;
};

Then use this client to wrap your app:

// App.tsx
import { ApolloProvider } from '@apollo/client';
import { useApollo } from './lib/apollo';
import { View, Text } from 'react-native';

export default function App() {
  const client = useApollo();

  if (!client) return <Text>Loading Apollo...</Text>;

  return (
    <ApolloProvider client={client}>
      {/* Your app components here */}
    </ApolloProvider>
  );
}

This setup ensures Apollo’s in-memory cache gets persisted between app sessions using AsyncStorage.

2. Detect Network Status with expo-network

Knowing whether the user is online or offline lets you switch behavior dynamically. Use this to switch between online and offline logic.

import * as Network from 'expo-network';

const isOnline = async () => {
  const status = await Network.getNetworkStateAsync();
  return status.isConnected && status.isInternetReachable;
};

You can use this to conditionally show offline banners, queue or defer mutations, disable form submissions if offline. Even simple checks like these can dramatically improve perceived quality.

3. Reading and Writing from the Cache

When offline, direct cache access helps keep things smooth. Apollo Client gives you methods like readQuery and writeQuery for this purpose.

const cachedData = client.readQuery({ query: GET_USER });
client.writeQuery({ query: GET_USER, data: newUserData });

This allows components to pull and push to the cache without requiring a network trip. Great for implementing things like:

Offline profile editing
Caching form drafts
Preloading views from previous sessions

To go even further, you can set up a local mutation queue and retry logic that flushes once the device is back online.

4. UX Considerations

Going offline-first isn’t just technical, it’s also about user experience. Consider:

Skeleton loaders when fetching (even cached) data
Retry buttons when fetch or save fails
Visual indicators like a toast or banner when offline
Degraded but useful experiences, not blank screens
Manual refresh to revalidate stale cache

If users can’t notice when they’ve gone offline, you’ve done something right

5. Tips

Apollo’s in-memory cache is volatile unless you persist it manually.
Default fetch policies like cache-first or cache-and-network can drastically reduce re-renders
Always assume mutations will fail when offline. Don’t rely on automatic retries
Logging cache writes during development helps debug data flow
Not every query needs persistence. Be selective
Avoid invalidating cache too aggressively. Let it breathe

Conclusion

Making your React Native app offline-ready using Apollo Client and caching techniques isn’t just about edge cases, it’s about delivering a consistently smooth user experience. With a bit of setup, you can enable your app to handle flaky networks with grace.

Focus on:

Persisting meaningful cache to avoid unnecessary re-fetches
Detecting network status reliably
Building clean UX patterns around connectivity changes

Apps that work offline feel faster, more stable, and more thoughtful. Users love them and they keep coming back

Want to see all of this in action? Check out the full source code on GitHub

Mastering Git Commit Messages: A Guide to Effective Version Control

Ayomide Daniel — Fri, 21 Mar 2025 22:27:22 +0000

Ever opened a Git history and felt like deciphering ancient hieroglyphs? Yeah, we've all been there. Let's face it, most Git logs resemble cryptic ancient texts, leaving fellow developers deciphering emojis and obscure acronyms. But fear not! Crafting clear and informative commit messages is easier than you think, and it can transform your Git history from a messy scroll into a compelling chronicle of your coding prowess.

Git commit messages are more than just annotations to your code changes; they are the narrative of your project's history. A well-crafted commit message not only documents what changes were made but also why they were made. Commit messages play a crucial role in keeping your Git history clean, organized, and understandable. By adopting a consistent style, you enhance collaboration and ease the process of code maintenance.

Why Care About Commit Messages?

Clarity and Understanding:
Clear commit messages help you and your team understand the purpose and context of each change. This is especially valuable when revisiting code after some time.
Collaboration:
When working with a team, descriptive commit messages facilitate effective collaboration. Team members can quickly grasp the intention behind changes and make informed decisions.
Troubleshooting:
Well-documented commits ease the process of troubleshooting and debugging. If an issue arises, a detailed Git history can help pinpoint when and why a particular change was introduced.

Best Practices for Writing Commit Messages

Use the imperative mood:
Instead of "Fixed login issue," write "Fix login issue."
Keep it concise:
Summarize the change in 50 characters or less for the first line.
Provide context when needed:
Explain why a change was made, not just what was changed.
Separate concerns:
Each commit should represent a single logical change.
Follow a consistent format:
Many teams adopt commit message conventions like Conventional Commits (e.g., feat: add user authentication).

Example of a commit message

Good example

fix(auth): resolve issue with token expiration

Tokens were expiring prematurely due to incorrect time conversion.
Updated the logic to ensure proper handling of expiration timestamps.

fix(auth): resolve issue with token expiration

The second commit message is simpler yet gives a concise message of what the commit entails.

Bad example

fixed bug

Here are some conventional commit examples:

feat: add user authentication
fix: resolve login form validation issue
perf: optimize image loading
refactor: simplify authentication logic
docs: update README with setup instructions
build: bump react-query from 4.0 to 4.5
chore: clean up unused dependencies
release: v1.2.0

Conclusion

Clear and consistent commit messages improve collaboration, debugging, and project maintainability. By following structured guidelines and best practices, you ensure that your Git history remains a useful resource rather than an indecipherable mess. So next time you commit code, take a moment to craft a message that your future self (and your teammates) will thank you for!

What commit message conventions do you follow? Drop your thoughts in the comments!

React Deep Dive: Mastering useRef for Enhanced Control and Performance

Ayomide Daniel — Fri, 21 Mar 2025 21:45:52 +0000

Unlocking React's Hidden Power with useRef

While state and props drive most React interactions, useRef stands out as a powerfool tool that facilitates direct access to DOM elements and persistence of mutable values across renders. This versatile hook can streamline development and optimize performance in various scenarios, enhancing the developer's toolkit.

Here's a comprehensive guide to using useRef in React with TypeScript:

1. Accessing DOM Elements:

Focusing inputs:

In this example, useRef is utilized to create a reference (inputRef) to an HTMLInputElement. The useEffect hook ensures that when the component mounts, it focuses on the input element, making it ready for user input.

Measuring elements:

Here, useRef is employed to create a reference (containerRef) to a div element. The useEffect hook logs the bounding rectangle of the referenced element when the component mounts. This can be useful for obtaining position and size information.

Triggering animations:

In this example, useRef is used to create a reference (elementRef) to a div element. The handleClick function triggers an animation by adding the 'animated' class to the referenced div element when a button is clicked.

2. Storing Mutable Values:

Persisting data across renders:

In this example, useRef is employed to persistently store the value returned by setInterval, creating a reference named intervalRef. The useEffect hook ensures that the interval is set up when the component mounts and cleared when the component unmounts, preventing memory leaks.

3. Advanced Use Cases:

Creating custom hooks with refs:

This snippet showcases how useRef can be used to create custom hooks, such as useClickOutside. This hook takes a reference to an HTML element (ref) and includes useEffect logic to handle clicks outside the specified element. It's a powerful abstraction for common patterns in React applications.

Optimizing performance with refs:

Here, useRef is utilized to optimize performance by caching expensive data. The useEffect hook ensures that the expensive data is fetched only once when the component mounts. If the data has already been fetched, the ref allows you to skip unnecessary fetch operations on subsequent renders. This pattern is particularly valuable for optimizing resource-intensive operations in your React components.

useRef unlocks a treasure trove of possibilities for React developers. It grants you direct access to the DOM, letting you tweak and manipulate elements with laser-like precision. This opens doors for fine-grained control beyond what state alone can offer. Plus, skipping unnecessary re-renders leads to performance boosts, making your apps run smooth and silky.

But the magic doesn't stop there. useRef empowers you to craft custom hooks and tackle advanced optimization strategies. This separation of state and DOM interactions keeps your code clean and maintainable, a win for both you and your teammates. So, don't wait – embrace useRef and take your React skills to the next level!

Embracing the power of useRef empowers React developers to elevate their development practices, fostering more efficient, maintainable, and performant applications.

Start incorporating useRef into your React arsenal and witness the positive impact on your development workflow and application outcomes!

A guide to env variables in react native

Ayomide Daniel — Fri, 21 Mar 2025 21:35:40 +0000

React Native, the powerful framework for building cross-platform apps, thrives on code reusability and flexibility. But managing sensitive data like API keys, development URLs, or feature flags directly in your codebase can be risky and impractical. Here's where environment variables (env variables) come in, offering a secure and dynamic approach to configuration management.

While familiar to frontend devs, using environment variables in React Native has some key differences that can trip up newcomers.

Think you can just use process.env in React Native like the good old days of frontend development? Hold your horses! While process.env exists in Node.js, React Native runs your JavaScript code in the Hermes engine, which lacks this module. But before you panic, there's good news!

React Native offers specific solutions for managing environment variables, tailored to its cross-platform needs

There are two main approaches to accessing env variables in React Native:

Using Libraries:

react-native-dotenv: This popular library automatically loads env variables from a .env file at runtime.
react-native-config: This library offers more advanced features like custom parsing and handling platform-specific variables.

Using Native Modules:

For more granular control and access to native platform features, you can create custom native modules to retrieve env variables directly from the device's environment.

react-native-dotenv

Installation:

npm install -D react-native-dotenv

Setup: babel.config.js

api.cache(false)
module.exports = {
  plugins: [
    ['module:react-native-dotenv']
  ]
};

Here is our .env file:

API_TOKEN=abc123

and it can be accessed in our code like this:

import {API_TOKEN} from "@env"

console.log(API_TOKEN)

react-native-config

As said above, the specificity of this library is that it allows you to access your variables on both sides. They did that by parsing the .env files directly on the native sides and generating a map.

import Config from "react-native-config";

const token = Config.API_TOKEN; // abc123

Conclusion

While traditional process.env might not be your immediate companion in React Native, powerful alternatives like react-native-dotenv and react-native-config effectively manage your env variables. By choosing the right tool for your needs, you'll not only ensure secure and flexible configuration, but also contribute to a cleaner and more maintainable codebase. Remember, these env variable heroes exist to empower your cross-platform React Native development, allowing you to focus on building amazing apps!

Key Takeaways:

React Native offers tailored solutions for env variables, distinct from process.env.
react-native-dotenv excels in simplicity and quick integration.
react-native-config unlocks advanced features and customization.
Secure your data, choose wisely, and build with confidence!
Go forth and conquer the env variable landscape in React Native!