#Getting a single item from query cache

5 messages · Page 1 of 1 (latest)

lime dove
#

Currently I have an api for getting all /folders and all /files (using React + Vite in client). In the client, the sidebar component fetches the folders which in turn makes them into links (example returned folder{name: "Primary", id: 'randomIDaeqw123'}). Main component is essentially a route that fetches the files of the current folder when you navigate using a folder link.

Now, I want to create a Breadcrumb component inside the Main. I already have a query to get all folders which also coincides with the data needed in this Breadcrumb component.

  1. I'm thinking of just filtering/finding a single folder from the cached folders. Is it expensive to filter the cached queryData just to get a single item?
    .getQueryData<Folder[]>(['folders'])
    ?.find((f) => f.id === (params.folderId as string));```

2. Should I just create a getSingleFolder endpoint + query hook?

Appreciate any tip!
folderAndFiles.png
lime dove
#

Just used the same query for now and used a selector.


export const useFolders = <TData = Folder[]>(select?: (data: Folder[]) => TData) =>
  useQuery({
    queryKey: ['folders'],
    queryFn: getRootFolders,
    throwOnError: true,
    select,
  });

export const useSingleFolder = (folderId: string) => {
  return useFolders((data) => data.find((f) => f.id === folderId));
};
tulip vector
#

If you think the collection will get huge, I'd have the single folder endpoint from your backend

#

(And consider using trpc over react query if you control your typescript backend)

lime dove