feat: get data for single loader

Author: Varixo

Diff for: packages/qwik-router/src/middleware/request-handler/resolve-request-handlers.ts

@@ -590,8 +590,17 @@ export async function renderQData(requestEv: RequestEvent) {
   requestEv.request.headers.forEach((value, key) => (requestHeaders[key] = value));
   requestEv.headers.set('Content-Type', 'application/json; charset=utf-8');
 
+  const allLoaders = getRequestLoaders(requestEv);
+  const loaders: Record<string, unknown> = {};
+  for (const loaderId in allLoaders) {
+    const loader = allLoaders[loaderId];
+    if (loader) {
+      loaders[loaderId] = loader;
+    }
+  }
+
   const qData: ClientPageData = {
-    loaders: getRequestLoaders(requestEv),
+    loaders,
     action: requestEv.sharedMap.get(RequestEvSharedActionId),
     status: status !== 200 ? status : 200,
     href: getPathname(requestEv.url, trailingSlash),

Diff for: packages/qwik-router/src/runtime/src/server-functions.ts

@@ -210,10 +210,9 @@ export const routeLoaderQrl = ((
     }
     const data = untrack(() => state[id]);
     if (!data && isBrowser) {
-      // TODO: fetch only loader with current id
-      throw loadClientData(location.url, iCtx.$hostElement$).then(
-        (data) => (state[id] = data?.loaders[id])
-      );
+      throw loadClientData(location.url, iCtx.$hostElement$, {
+        loaderIds: [id],
+      }).then((data) => (state[id] = data?.loaders[id]));
     }
     return _wrapStore(state, id);
   }

Diff for: packages/qwik-router/src/runtime/src/use-endpoint.ts

@@ -9,14 +9,18 @@ export const loadClientData = async (
   element: unknown,
   opts?: {
     action?: RouteActionValue;
+    loaderIds?: string[];
     clearCache?: boolean;
     prefetchSymbols?: boolean;
     isPrefetch?: boolean;
   }
 ) => {
   const pagePathname = url.pathname;
   const pageSearch = url.search;
-  const clientDataPath = getClientDataPath(pagePathname, pageSearch, opts?.action);
+  const clientDataPath = getClientDataPath(pagePathname, pageSearch, {
+    actionId: opts?.action?.id,
+    loaderIds: opts?.loaderIds,
+  });
   let qData: Promise<ClientPageData | undefined> | undefined;
   if (!opts?.action) {
     qData = CLIENT_DATA_CACHE.get(clientDataPath);

Diff for: packages/qwik-router/src/runtime/src/utils.ts

@@ -1,6 +1,6 @@
-import type { RouteActionValue, SimpleURL } from './types';
+import type { SimpleURL } from './types';
 
-import { QACTION_KEY } from './constants';
+import { QACTION_KEY, QLOADER_KEY } from './constants';
 
 /** Gets an absolute url path string (url.pathname + url.search + url.hash) */
 export const toPath = (url: URL) => url.pathname + url.search + url.hash;
@@ -31,13 +31,26 @@ export const isSameOriginDifferentPathname = (a: SimpleURL, b: SimpleURL) =>
 export const getClientDataPath = (
   pathname: string,
   pageSearch?: string,
-  action?: RouteActionValue
+  options?: {
+    actionId?: string;
+    loaderIds?: string[];
+  }
 ) => {
-  let search = pageSearch ?? '';
-  if (action) {
-    search += (search ? '&' : '?') + QACTION_KEY + '=' + encodeURIComponent(action.id);
+  const search = new URLSearchParams(pageSearch);
+  if (options?.actionId) {
+    search.set(QACTION_KEY, options.actionId);
+  } else if (options?.loaderIds) {
+    for (const id of options.loaderIds) {
+      search.append(QLOADER_KEY, id);
+    }
   }
-  return pathname + (pathname.endsWith('/') ? '' : '/') + 'q-data.json' + search;
+  const searchString = search.toString();
+  return (
+    pathname +
+    (pathname.endsWith('/') ? '' : '/') +
+    'q-data.json' +
+    (searchString.length ? '?' + searchString : '')
+  );
 };
 
 export const getClientNavPath = (props: Record<string, any>, baseUrl: { url: URL }) => {