T
TanStack•11mo ago
exotic-emerald

Getting a single item from query cache

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? 
const current = queryClient
    .getQueryData<Folder[]>(['folders'])
    ?.find((f) => f.id === (params.folderId as string));
const current = queryClient
    .getQueryData<Folder[]>(['folders'])
    ?.find((f) => f.id === (params.folderId as string));
2. Should I just create a getSingleFolder endpoint + query hook? Appreciate any tip!
No description
4 Replies
exotic-emerald
exotic-emeraldOP•11mo ago
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));
};
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));
};
eager-peach
eager-peach•11mo ago
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)
exotic-emerald
exotic-emeraldOP•11mo ago
Thank you for the reply! I was in the middle of studying trpc, but stopped when RSC and server actions were stable. Might get back to it sometime. Thanks again!
eager-peach
eager-peach•11mo ago
Fair. At the moment RSC is only really usable in Nextjs and Waku to some extent. React Router should be next up. If you have a split ts backend and no nextjs, I highly recommended trpc

Did you find this page helpful?