T
tRPC
❓-help
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.
I prefetch data using a client and storing it to an offline database
I re hydrate using setData like this
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;
} | {
...;
} | {
...;
})[]
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));
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]);
Looking for more? Join the community!
T
tRPC
❓-help
T
tRPC
❓-help