useQueries - adding a queryKey or any way to mark the result?

[untold garnet]

Hi ALL!

Have a question if there is a way to mark the queries somehow?

I have written a useQueries hook that fetches images from our API ( behind a Auth header, that's why I'm fetching the data blob ). The data for the items ( ids, names, diff. info ) is passed down from a parent component ( MUI Stepper Dialog uses the data ) and I display it in a list with the item data ( as a 'preview' that gets sent to our API to be printed ).

When I call the hook the useQueries returns the array of all the queries triggered with the standard query object as a response.

Now the question is if there is a way to mark those response objects so that I can find() the correct query with the correct image?

I get the Item data in an array and I pass that array to my useQueries to fetch the images - how I then check if the image has been fetched is with the iteration index of the array - which gives me the result I'm looking for...

BUT: is this safe?

Any help would be much appreciated 😄

[wise nimbus]

can you show some code?

[untold garnet]

Hi - sorry was away 😄

import { imageClient } from '../../api/imageClient';
import { useQueries } from '@tanstack/react-query';
import { getQualifiedQrCodeURL } from '../../utils/getQualifiedQrCodeURL';

const useQrCodesSrcQueries = (qrCodeData: any[]) => {
  const getQrCodes = async ({ queryKey }: any) => {
    const [, , qrCodeId, qrCodeUrl] = queryKey;

    const imageSource = await imageClient(`${qrCodeUrl}`);

    if (imageSource) {
      return {
        src: URL.createObjectURL(imageSource),
        id: qrCodeId,
      };
    } else {
      return false;
    }
  };

  const buildQrCodeSourcesQueries = (qrCodeDataItems: any) => {
    return {
      queries: qrCodeDataItems.map((qrCodeDataItem: any) => {
        const qrCodeUrl = getQualifiedQrCodeURL(qrCodeDataItem);
        const qrCodeId = qrCodeDataItem.id;

        return {
          queryKey: ['qrCode', 'imageSource', qrCodeId, qrCodeUrl],
          queryFn: getQrCodes,
          staleTime: Infinity,
          retry: false,
        };
      }),
    };
  };

  return useQueries(buildQrCodeSourcesQueries(qrCodeData));
};

export default useQrCodesSrcQueries;