eyalll
eyalll2y 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