eyalll•2y ago

pre fetch serveral prodecures dynamically

Hello!. I'm developing a React Native app which needs an offline mode for some assets that the user wants (like spotify albums or playlists). I have an endpoint that tells me which assets to download and for which procedures, so I can rehydrate those react query procedures in Offline Mode. The feature is working but I had to @ts-ignore, I'm trying to annotate this feature correctly. The assestToDownload produre returns this type.

assetsToDownload: ({
    router: "topos";
    procedure: "byId";
    params: {
        topoId: string;
        zoneId: string;
    };
    version: number;
    zoneId: string;
} | {
    router: "walls";
    procedure: "byId";
    params: {
        wallId: string;
    };
    version: number;
    zoneId: string;
} | {
    ...;
} | {
    ...;
})[]

assetsToDownload: ({
    router: "topos";
    procedure: "byId";
    params: {
        topoId: string;
        zoneId: string;
    };
    version: number;
    zoneId: string;
} | {
    router: "walls";
    procedure: "byId";
    params: {
        wallId: string;
    };
    version: number;
    zoneId: string;
} | {
    ...;
} | {
    ...;
})[]

I prefetch data using a client and storing it to an offline database

  await filteredAssets.reduce(async (prevAsset, asset, index) => {
    const { params, router, procedure, version, zoneId } = asset;
    const queryKey = stringify({ router, procedure, params });

    try {
      //@ts-ignore
      const selectedClient = client[router][procedure];

      //@ts-ignore
      const data = await selectedClient.query(params);

      await offlineDb.setOrCreate(db, queryKey, zoneId, data, version);
    } catch (error) {}
    const r = (await prevAsset) + 1;
    dispatch(setProgress((index + 1) / totalAssets));

    return r;
  }, Promise.resolve(0));

  await filteredAssets.reduce(async (prevAsset, asset, index) => {
    const { params, router, procedure, version, zoneId } = asset;
    const queryKey = stringify({ router, procedure, params });

    try {
      //@ts-ignore
      const selectedClient = client[router][procedure];

      //@ts-ignore
      const data = await selectedClient.query(params);

      await offlineDb.setOrCreate(db, queryKey, zoneId, data, version);
    } catch (error) {}
    const r = (await prevAsset) + 1;
    dispatch(setProgress((index + 1) / totalAssets));

    return r;
  }, Promise.resolve(0));

I re hydrate using setData like this

    downloadedList.forEach((asset) => {
      const { params, router, procedure, zoneId } = asset;

      // @ts-ignore
      const selectedUtil = utils[router][procedure];

      const db = offlineDb.open();
      const savedData = offlineDb.get(
        db,
        stringify({ router, procedure, params }),
        zoneId,
      );

      if (!savedData) return;

      selectedUtil.setData(params, savedData.data);
      db.close();
    });
  }, [utils]);

    downloadedList.forEach((asset) => {
      const { params, router, procedure, zoneId } = asset;

      // @ts-ignore
      const selectedUtil = utils[router][procedure];

      const db = offlineDb.open();
      const savedData = offlineDb.get(
        db,
        stringify({ router, procedure, params }),
        zoneId,
      );

      if (!savedData) return;

      selectedUtil.setData(params, savedData.data);
      db.close();
    });
  }, [utils]);

0 Replies

No replies yetBe the first to reply to this messageJoin

pre fetch serveral prodecures dynamically

Did you find this page helpful?