Incoherent data with multiple createServerData$ in routeData

With the following route:

export function routeData({ params }: RouteDataArgs) {
  const members = createServerData$(
    async (organisationId) => {
      const members = await prisma.membership.findMany({
        where: { organisationId },
        include: { user: true },
      });

      return members.map((m) => ({ ...m, ...m.user }));
    },
    { key: () => params.orgId }
  );

  const invitations = createServerData$(
    (organisationId) =>
      prisma.invitation.findMany({ where: { organisationId } }),
    { key: () => params.orgId }
  );

  return { members, invitations };
}

export default function ManageOrganisationMembers() {
  const { members, invitations } = useRouteData<typeof routeData>();
  const params = useParams();

  console.log(JSON.stringify(members(), null, 2));
  console.log(JSON.stringify(invitations(), null, 2));

  return (
    <Show when={members() && invitations()}>
      <Header>Users</Header>
      <Container>
        <h1>Members</h1>
        <Table
          data={members()!}
          ...
        />
        <h1 class="mt-10">Invitations</h1>
        <Table
          data={invitations()!}
          ...
        />
      </Container>
    </Show>
  );
}

export function routeData({ params }: RouteDataArgs) {
  const members = createServerData$(
    async (organisationId) => {
      const members = await prisma.membership.findMany({
        where: { organisationId },
        include: { user: true },
      });

      return members.map((m) => ({ ...m, ...m.user }));
    },
    { key: () => params.orgId }
  );

  const invitations = createServerData$(
    (organisationId) =>
      prisma.invitation.findMany({ where: { organisationId } }),
    { key: () => params.orgId }
  );

  return { members, invitations };
}

export default function ManageOrganisationMembers() {
  const { members, invitations } = useRouteData<typeof routeData>();
  const params = useParams();

  console.log(JSON.stringify(members(), null, 2));
  console.log(JSON.stringify(invitations(), null, 2));

  return (
    <Show when={members() && invitations()}>
      <Header>Users</Header>
      <Container>
        <h1>Members</h1>
        <Table
          data={members()!}
          ...
        />
        <h1 class="mt-10">Invitations</h1>
        <Table
          data={invitations()!}
          ...
        />
      </Container>
    </Show>
  );
}

I'm expecting an array of different objects for the members and the invitations. But when consoling/using the two data sets, invitations has the same content than members. If I change the declaration order in routeData, then members has the same content than invitations. Is this expected? Does that mean we can only have one createServerData$ in routeData?

1 Reply

binajmen•2y ago

see https://github.com/solidjs/solid-start/issues/580

GitHub

Incoherent data with multiple createServerData$ in routeData · ...

With the following route: export function routeData({ params }: RouteDataArgs) { const members = createServerData$( async (organisationId) => { const members = await prisma.membership.findMa...

Gaming

Programming

Incoherent data with multiple createServerData$ in routeData