SolidJSS
SolidJS•11mo ago•
5 replies
binajmen

Using createAsync in SolidJS: Handling Data Dependencies

Currently, I'm thinking of two approaches:

Unified Loader Pattern:
const loader = query(async (id: string) => {
  "use server";
  const criterion = await criterionRepo.find(id);
  const programs = await programRepo.findAll();
  const variants = await variantRepo.findByProgram(criterion.program_id);
  return { criterion, programs, variants };
}, "admin-criterion");

Separate Async Queries Pattern (commented out):
const criterion = createAsync(() => getCriterion(params.id));
const programs = createAsync(() => getPrograms());
const variants = createAsync(() => getVariantsByProgram(programId()));

My key questions are:

Data Loading Strategy
Is it better to use a unified loader that fetches all related data in one query (similar to Remix's loader pattern), or should we use separate createAsync calls for each data dependency?

Dynamic Data Updates
How should we handle dynamic updates when a program is selected? Currently, the form has this select handler:

<Select
  options={data()!.programs}
  valueKey="id"
  labelKey="name"
  select={(program) => program.id === data()!.criterion.program_id}
  onChange={(e) => setProgramId(e.currentTarget.value)}
/>

But changing the program doesn't update the variants because they're loaded once through the unified loader.

Dependency Management
The variants depend on the selected programId. The current loader handles this initial dependency well, but doesn't account for dynamic updates.

Potential solutions:
- Keep the loader for initial data but add a separate action/query for variant updates
- Return to separate createAsync calls with proper dependency tracking
- Implement a hybrid approach

What's the most idiomatic way to handle this in SolidJS, considering both initial load and dynamic updates?
Was this page helpful?