[React-Native] Best practice to persist data

[rphlmr]

Hello,

I want to talk about persisting data on react-native app :)
Comments are welcome to do it better (and I hope this usecase can help if something around persistence is build)

My mobile app (react-native) fetch a product catalog (big JSON) containing all needed datas to display.
(It could be bad practice for some people but the purpose behind that is to provide offline content when there is no network.)

So, it load initial data saved on file system with async Expo FileSystem API (if exists) and set it to queryCache.
The corresponding query has initialStale and try to refetch content in background, and persist the result again.

To achieve this, I use a custom hook that give me a "isLoadingCompleted" to prevent splashscreen to hide during the process (it could be anything else, if this hook fires before the query).

What I try to do is to replace Redux, Redux persist and Saga for some of my "server state".

Want to know what you think about this :

App.js

export default function App() {
  const [isLoadingCompleted] = usePersistedCatalog();

// Expo component that prevent splashscreen to hide, could be anything else
  if (!isLoadingCompleted) return <AppLoading />;

  return <MyApp />;
}

UsePersistedCatalog.js

// mapCatalog() = just a simple mapper that fill default values if no persisted data (initial state)
export function usePersistedCatalog() {
  const queryCache = useQueryCache(); // or just import queryCache
  const [isLoadingCompleted, setIsLoadingCompleted] = useState(false);

  useEffect(() => {
    FileSystem.readAsStringAsync(catalogURI)
      .then((raw) => {
        queryCache.setQueryData("catalog", mapCatalog(JSON.parse(raw)));
      })
      .catch((_) => {
        queryCache.setQueryData("catalog", mapCatalog());
      })
      .finally(() => {
        setIsLoadingCompleted(true);
      });
  }, [queryCache]);

  return [isLoadingCompleted];
}

CatalogHooks.js

async function getCatalog() {
  try {
    const { data } = await axios.get("https://some/api");

    await FileSystem.writeAsStringAsync(
      catalogURI,
      JSON.stringify(data)
    ).catch((e) => console.warn(e));

    return data;
  } catch (e) {
    console.error(e);
    return queryCache.getQueryData("catalog"); // hide error when no network connection. Could be improve
  }
}

const useCatalog = () => {
  const { data, error, isFetching, isLoading } = useQuery(
    "catalog",
    getCatalog,
    {
      retry: 1,
      cacheTime: Infinity, // I have some logic to manually invalidate this cache and refresh data - personal use case ;)
      staleTime: Infinity, // I have some logic to manually invalidate this cache and refresh data - personal use case ;)
      refetchOnWindowFocus: false, // don't know if it's mandatory on react-native
      initialStale: true
    }
  );

  return { data, isLoading: isFetching || isLoading, error };
};

// Why this : to mimic redux ... reducer :) 
export const useCatalogSelector = (selectorFn) => {
  const selectorFnRef = React.useRef();
  selectorFnRef.current = selectorFn;

  const { data, isLoading, error } = useCatalog();

  return {isLoading, error, ...selectorFnRef.current(data) };
};

export const catalogSelector = {
  allProductsIds: ({ allProductsIds }) => {
    return { allProductsIds };
  },
  productById: (id) => ({ productsById }) => {
    const product = productsById[productsById]; // imagine more safety logic or default value if null or sending back an error
    return { product };
  }
};

Component.js

function Component() {
  const { allProductsIds, isLoading, error } = useCatalogSelector(
    catalogSelector.allProductsIds
  );

  return (
    <View>
      // ui part
    </View>
  );
}

After all, that's just a POC for more "complex" needs currently hold by Redux, Redux persist (using Expo FileSystem) and Redux saga (used for other usecases out of scope).
Love these 3 libs, really, but if I can simplify some parts of my app, I'll take it :D

[cloudmu]

Looks very good. Mind elaborating how you manually invalidate cache and refresh data?

[rphlmr]

I thought to use queryCache.invalidateQueries('catalog') on onPress button or swipe down a flatlist.

I need to take time to do a real POC (auto refetching, trigger refetch). But I test this code and it works for us :)

[psycho-baller]

Hey @rphlmr I'm building an expo application with a NextJS and tRPC backend and I would like to have a way for the user to use the application offline. From your experience, what would you recommend? I've looked into using simly asyncStorage with Tanstack to complex solutions like expo-sqlite, WatermelonDB, RxDB, powerSync, electric-sql, etc... Any advice and how I should go about this?

[herissondev]

Hi @psycho-baller, i'm in the same situation as you. What stack did you end up using to build this offline mode ?
Thanks for the help!

[psycho-baller]

Hey @herissondev sorry for the late response. I ended up using Turso and Tanstack persist asyncStorage. Definitely doesn't make the application 'local-first' but I decided I'll just wait and hope Turso implements something for that. You can find the repo of my app here