React Native Offline Mode, Online First

[elevyg]

Hello!, I'm developing a React Native App using TRPC and React Query. I'm trying to replicate something similar to the Spotify offline behavior, where users can download some specific assets to have them when there is no service.

I've been trying to implement the persistQueryClient pluggin as follows:
1.- Download from the BE the list of assets to keep in local storage
2.- Prefetch all the assets
3.- Store a query key of those fetches
4.- Implement persistQueryClientSuscribe to save in MMKV Storage the queries
5.- When the user activates offline mode hydrate the query client with the info in storage using persistQueryClientRestore

This is not working and I'm hustling trying to understand the documentation.

Any thoughts or ideas??

ReactQueryProvider.tsx

...
 const [queryClient] = useState(() => {
    const client = new QueryClient({
      defaultOptions: {
        queries: {
          retry: false,
          staleTime: Infinity,
          cacheTime: Infinity,
          networkMode: "online",
        },
      },
    });
    if (__DEV__) addPlugin({ queryClient: client });
    return client;
  });
...

useOffline.ts

const useOffline = () => {
  const queryClient = useQueryClient();

  const downloadList = trpc.user.getDownloadedAssets.useQuery(undefined, {
    enabled: featureFlags.offline,
  });
  const utils = trpc.useContext();

  const idsToCached = useMemo(() => {
    const ids = new Set<QueryKey>([]);

    downloadList?.data?.DownloadedZones.flatMap((z) => {
      ids.add([["zones", "allSectors"], { zoneId: z.id }]);
      utils.zones.allSectors.prefetch({ zoneId: z.id });
      return z.sectors;
    })
      .flatMap((s) => {
        ids.add([["sectors", "allWalls"], { sectorId: s.id }]);
        utils.sectors.allWalls.prefetch({ sectorId: s.id });
        return s.walls;
      })
      .flatMap((w) => {
        ids.add([["walls", "byId"], { wallId: w.id }]);
        utils.walls.byId.prefetch({ wallId: w.id });
        const { routes, topos } = w;
        return { routes, topos };
      })
      .flatMap((rt) => {
        const routePaths = rt.routes.flatMap((r) => {
          ids.add([["route"], { routeId: r.id }]);
          return r.RoutePath;
        });
        rt.topos.forEach((t) => {
          ids.add([["topos", "byId"], { topoId: t.id }]);
          utils.topos.byId.prefetch({ topoId: t.id });
        });
        return routePaths;
      })
      .forEach((rp) => {
        ids.add([["routePath"], { routePathId: rp.id }]);
      });

    return Array.from(ids).map((k) => hashQueryKey(k));
  }, [
    downloadList?.data?.DownloadedZones,
    utils.sectors.allWalls,
    utils.topos.byId,
    utils.walls.byId,
    utils.zones.allSectors,
  ]);

  if (featureFlags.offline) {
    const unsubscribe = persistQueryClientSubscribe({
      queryClient,
      persister,
      dehydrateOptions: {
        shouldDehydrateQuery: ({ queryKey, queryHash }) => {
          return idsToCached.includes(queryHash);
        },
      },
    });
  }
  const { isOfflineMode } = useOfflineMode();
  useEffect(() => {
    if (isOfflineMode) {
      persistQueryClientRestore({
        queryClient,
        persister,
        maxAge: 0,
      });
    }
    onlineManager.setOnline(!isOfflineMode);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [isOfflineMode]);
};

[TkDodo]

why not use the PersistQueryClientProvider ?

[elevyg]

I just tried your suggestion, but still is not hydrating as expected. I try to mimic offline situation setting the url to undefined

To me, I'd be more intuitive that mutations and queries could have a "onOffline" prop

I refactored to this:

import { AppRouter } from "@andescalada/api/src/routers/_app";
import { transformer } from "@andescalada/api/src/transformer";
import NetInfo from "@react-native-community/netinfo";
import {
  hashQueryKey,
  onlineManager,
  QueryClient,
  QueryClientProvider,
} from "@tanstack/react-query";
import { PersistQueryClientProvider } from "@tanstack/react-query-persist-client";
import { createTRPCProxyClient, httpBatchLink } from "@trpc/client";
import Env from "@utils/env";
import { createMMKVStoragePersister } from "@utils/mmkv/createMMKVPersister";
import storage from "@utils/mmkv/storage";
import { trpc } from "@utils/trpc";
import Constants from "expo-constants";
import { FC, ReactNode, useCallback, useEffect, useState } from "react";
import { addPlugin } from "react-query-native-devtools";

const persister = createMMKVStoragePersister({ storage });

onlineManager.setEventListener((setOnline) => {
  return NetInfo.addEventListener((state) => {
    setOnline(!!state.isConnected);
  });
});

export interface AccessToken {
  exp: number;
}

type Key = {
  zoneId: "zoneId";
  sectorId: "sectorId";
  wallId: "wallId";
  routeId: "routeId";
  topoId: "topoId";
  routePathId: "routePathId";
};

type QueryKey = [string[], Partial<{ [key in keyof Key]: string }>];

interface Props {
  accessToken: string;
  firstTimeLogin?: true;
  children: ReactNode;
}

const localHost =
  Constants.manifest2?.extra?.expoGo?.debuggerHost ||
  Constants.manifest?.debuggerHost;

const url = __DEV__
  ? `http://${localHost?.split(":").shift()}:3000`
  : Env.API_URL;

// const url = undefined;

const TRPCProvider: FC<Props> = ({ accessToken, children }) => {
  const [queryClient] = useState(() => {
    const client = new QueryClient({
      defaultOptions: {
        queries: {
          retry: false,
          staleTime: Infinity,
          cacheTime: Infinity,
          networkMode: "offlineFirst",
        },
      },
    });
    if (__DEV__) addPlugin({ queryClient: client });
    return client;
  });
  const [trpcClient] = useState(() =>
    trpc.createClient({
      links: [
        httpBatchLink({
          url: `${url}/api/trpc`,

          async headers() {
            return {
              Authorization: `Bearer ${accessToken}`,
            };
          },
        }),
      ],
      transformer,
    }),
  );

  const client = useCallback(
    () =>
      createTRPCProxyClient<AppRouter>({
        links: [
          httpBatchLink({
            url: `${url}/api/trpc`,

            async headers() {
              return {
                Authorization: `Bearer ${accessToken}`,
              };
            },
          }),
        ],
        transformer,
      }),
    [accessToken],
  );

  const [idsToCached, setIdsToCached] = useState<string[]>([]);

  const a = useCallback(async () => {
    const b = await client().user.getDownloadedAssets.query();
    if (!b) return;
    const ids = new Set<QueryKey>([]);
    b.DownloadedZones.flatMap((z) => {
      ids.add([["zones", "allSectors"], { zoneId: z.id }]);

      return z.sectors;
    })
      .flatMap((s) => {
        ids.add([["sectors", "allWalls"], { sectorId: s.id }]);

        return s.walls;
      })
      .flatMap((w) => {
        ids.add([["walls", "byId"], { wallId: w.id }]);

        const { routes, topos } = w;
        return { routes, topos };
      })
      .flatMap((rt) => {
        const routePaths = rt.routes.flatMap((r) => {
          ids.add([["route"], { routeId: r.id }]);
          return r.RoutePath;
        });
        rt.topos.forEach((t) => {
          ids.add([["topos", "byId"], { topoId: t.id }]);
        });
        return routePaths;
      })
      .forEach((rp) => {
        ids.add([["routePath"], { routePathId: rp.id }]);
      });
    const idsArray = Array.from(ids).map((k) => hashQueryKey(k));
    console.log(idsArray);
    setIdsToCached(idsArray);
  }, [client]);

  useEffect(() => {
    a();
  }, [a]);

  return (
    <trpc.Provider client={trpcClient} queryClient={queryClient}>
      <PersistQueryClientProvider
        client={queryClient}
        persistOptions={{
          persister,
          dehydrateOptions: {
            shouldDehydrateQuery: ({ queryHash }) => {
              return idsToCached.includes(queryHash);
            },
          },
        }}
      >
        {children}
      </PersistQueryClientProvider>
    </trpc.Provider>
  );
};

export default TRPCProvider;

[TkDodo]

To me, I'd be more intuitive that mutations and queries could have a "onOffline"

persistence has nothing to do with "offline". The persister mirrors the queryCache to an external store, that is all.

[elevyg]

Hey! @TkDodo, I was able to use my first approach changing persistQueryClientSubscribe to persistQueryClientSave so I have more control on which moment I want to freeze the queryCache. Then when there is no service and the user turns on the Offline Mode I restore.

persistQueryClientSubscribe was deleting the persisted data on any error.

Thanks for the challenge and the explanations, helped me a lot