T
TanStack•4y ago
optimistic-gold

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

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()
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 😄
4 Replies
genetic-orange
genetic-orange•4y ago
can you show some code?
optimistic-gold
optimistic-goldOP•4y ago
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;
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;
optimistic-gold
optimistic-goldOP•4y ago
optimistic-gold
optimistic-goldOP•4y ago
selectedCodes is the one with the data for the item data rendering - and then the queries are the ones I have to bind to the mapping of the selected codes. array index based seems legit since I get the selectedCodes as an array which I then pass as an argument to the queries hook

Did you find this page helpful?