eyalll Posts

eyalll

•Created by eyalll on 5/10/2023 in #❓-help

Default Query Function to resume paused mutations

I'm building a React Native App with an offline mode. I implemented a PersistQueryProvider and a built my own createMMKVStoragePersister. When the app gets back online it fails to resume paused mutations because at that point functions does not exist. Any advice on providing the default query fucntions since they already exist from the trpcClient?

6 replies

TtRPC

•Created by eyalll on 2/1/2023 in #❓-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.

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]);

1 replies

TtRPC

•Created by eyalll on 10/26/2022 in #❓-help

Prefetch forEach

Hello, I'm trying to prefetch a list of procedures like this

type QueryKeys = {
  // how to type this?
  path: [string, string];
  params: Partial<{ [key in keyof Key]: string }>;
};

const prefetchProcedures = (ids: QueryKeys[]) => {
  const utils = trpc.useContext();
  // [{path:["zones", "allSectors"], params: { zoneId: z.id }},{path: ["sectors", "allWalls"], params: { sectorId: s.id }]}
  ids.forEach((i) => {
    utils[i.path[0]][i.path[1]].prefetch(i.params);
  });
};

type QueryKeys = {
  // how to type this?
  path: [string, string];
  params: Partial<{ [key in keyof Key]: string }>;
};

const prefetchProcedures = (ids: QueryKeys[]) => {
  const utils = trpc.useContext();
  // [{path:["zones", "allSectors"], params: { zoneId: z.id }},{path: ["sectors", "allWalls"], params: { sectorId: s.id }]}
  ids.forEach((i) => {
    utils[i.path[0]][i.path[1]].prefetch(i.params);
  });
};

How can typesafe the path of the router and the procedure?

2 replies