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");

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()));

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)}
/>

<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

variants

depend on the selected

programId

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?

SolidJS•13mo 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");

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()));

const criterion = createAsync(() => getCriterion(params.id));
const programs = createAsync(() => getPrograms());
const variants = createAsync(() => getVariantsByProgram(programId()));

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

<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

variants

depend on the selected

programId

programId

Using createAsync in SolidJS: Handling Data Dependencies

Using createAsync in SolidJS: Handling Data Dependencies

Similar Threads

Similar Threads

Similar Threads