Is nesting query and anti-pattern?

[caseybaggz]

So I have a few re-usable query spread throughout my app. Thus, in a lot of cases, I'm calling query inside other querys.

For example:

// permissions.ts
const queryUserPermissions = query(..., 'queryUserPermissions');

// some-page.tsx
const queryPageData = query(async (org) => {
  'use server';
  const { userId } = await useSession();
  const permissions = await queryUserPermissions(userId);
 
  // ...auth validation

  const data = await getRouteData(org);
  return { data, permissions};
}, 'queryPageData');

Is this technically an anti-pattern for this design or it is valid and will still cache everything because Solid rules? 👀 🤔

[ryansolid]

Yeah it won't really do what you want it to do since in one case the cache is on the client and the other it is on the server. This can sort of work, but it isn't recommended.

[caseybaggz]

Yeah it won't really do what you want it to do since in one case the cache is on the client and the other it is on the server. This can sort of work, but it isn't recommended.

Good to know!

What about if both queries on are the server? Still not recommended?

[ryansolid]

The way the cache works on the server is just dedupe the life of the request, so like the way the APIs are designed query is always being called from component code. Like even if it is initially on the server during SSR it lives in isomorphic zone. Basically query doesn't really work if it is inside a use server.

[caseybaggz]

The way the cache works on the server is just dedupe the life of the request, so like the way the APIs are designed query is always being called from component code. Like even if it is initially on the server during SSR it lives in isomorphic zone. Basically query doesn't really work if it is inside a use server.

My world view has just forever changed...

So, what I think I'm hearing is that nesting query's is not an issue, but is not doing anything really if they are on the server.

Query's in general are better designed keeping the "use server" decorator in the fetch functions and not in query themselves?

So like:

// lib/orgs.ts
export async function getOrgs() {
  "use server";
   ...fetch data
}

// page.tsx 

const queryData = query(async () => {
  return await getOrgs();
})